/* Custom CSS that complements Bootstrap 5 */

/* Custom color adjustments */
:root {
    --bs-primary: #fd7e14;
    --bs-dark: #212529;
    --bs-light: #f8f9fa;
    --bs-secondary: #6c757d;
    --bs-tertiary: #adb5bd;
    --bs-brand-light: #FCE3CC;
    --white: #ffffff;
    --gray-900: #212529;
    --gray-500: #adb5bd;
    --gray-300: #dee2e6;
    --danger: #dc3545;

    --brand-100: #FCE3CC;
    --brand-200: #F8C799;
    --brand-300: #F5AA66;
    --brand-400: #F18E33;
    --brand-500: #fd7e14;
    --brand-600: #BE5B00;
    --brand-700: #8F4400;
    --brand-800: #5F2E00;
    --brand-900: #301700;
    --traitsync-primary: var(--brand-500);

    --bs-tertiary-color: var(--gray-500);
    --bs-tertiary-color-bg: var(--gray-100);

    --brand: var(--brand-500);
    --primary: var(--gray-900);
    --info: var(--brand);
    --success: #198754;

    --btn-primary-bg: var(--brand-500);
    --bs-primary-rgb: 253, 126, 20; /* RGB values for #fd7e14 */
}

/* Custom card styling for steps */
.card {
    transition: transform 0.3s ease;
}

.card:hover {
    /* transform: translateY(-5px); */
}

/* Button Styles */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  min-height: 3rem;
  padding: 0.75rem 1rem;

  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25rem; /* 142.857% */
  letter-spacing: -0.01563rem;
}

@media (min-width: 768px) {
  .btn {
    font-size: 1rem;
    line-height: 150%; /* 1.5rem */
  }
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  box-shadow: 4px 4px 0px 0px #FDB572;
  background-color: var(--primary);
  border: unset;
}

.btn-primary:hover, .btn-primary:active, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  box-shadow: 2px 2px 0px 0px #FDB572;
  background-color: var(--primary);
  border: unset;
}

.btn-secondary {
  border-radius: 0.375rem;
  border-color: var(--traitsync-primary);
  background: var(--white);
  box-shadow: 4px 4px 0px 0px #FDB572;
  color: var(--gray-900);
}

.btn-secondary:hover {
  background: var(--white);
  box-shadow: 2px 2px 0px 0px #FDB572;
  color: var(--gray-900);
}

.btn-secondary:first-child:active,
.btn-secondary:active {
  background: var(--white) !important;
  color: var(--gray-900) !important;
}

.btn-secondary:disabled {
  background: var(--white);
  color: var(--gray-500);
  border: 2px solid var(--gray-300);
}

.btn-light {
  background: var(--white);
  border: none;
  box-shadow: none;
}

.btn-light:hover,
.btn-light:active {
  background: var(--white);
}

.btn-light:first-child:active,
.btn-light:active {
  background: var(--white) !important;
  color: var(--gray-900) !important;
  box-shadow: none;
}

.btn-danger {
  background-color: var(--white);
  color: var(--danger);
}

.btn-sm {
  padding: 0.625rem 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: -0.01563rem;
  font-size: 0.875rem;
  border: unset;
  min-width: 5rem;
  min-height: 2.5rem;
}

/* Outline primary button styling */
.btn-outline-primary {
  /* border-radius: 0.375rem;
  border: 2px solid var(--brand-500); */
  background: var(--white);
  color: var(--gray-900);
  /* box-shadow: 4px 4px 0px 0px #FDB572; */
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary:first-child:active,
:not(.btn-check)+.btn-outline-primary:active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--brand-500);
  box-shadow: 2px 2px 0px 0px #FDB572;
}


/* Photo Upload Styles */
.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.preview-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: 200px;
}

/* Drag and drop indication */
body.drag-over:after {
    content: "Drop files here";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(253, 126, 20, 0.7);
    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Rating stars styling */
.rating-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-rating {
    background: none;
    border: none;
    color: #ccc;
    font-size: 1.5rem;
    padding: 0.25rem;
    transition: all 0.2s ease;
    min-height: auto;
    display: inline;
    cursor: pointer;
}

.btn-rating:hover,
.btn-rating:focus {
    color: #ffc107;
    transform: scale(1.1);
    box-shadow: none;
}

.btn-rating:hover ~ .btn-rating {
    color: #ccc;
}

.btn-rating i {
    pointer-events: none;
}

/* Selected state for stars */
.btn-rating.selected {
    color: #ffc107;
}

/* Make the stars light up when hovered in sequence */
.rating-stars:hover .btn-rating {
    color: #ffc107;
}

.rating-stars .btn-rating:hover ~ .btn-rating {
    color: #ccc;
}

/* Custom background color for orange progress bars */
.bg-orange {
    background-color: var(--brand-500) !important; /* Using the project's brand orange */
}

/* Add Khuyumka Project Rules specific CSS below */

.htmx-indicator {
    display: none; /* Default state for any htmx indicator */
}

/* When a form with htmx-submit-indicate is processing */
.htmx-submit-indicate.htmx-request .button-text-default {
    display: none;
}

.htmx-submit-indicate.htmx-request .button-text-loading.htmx-indicator {
    display: flex;
}

/* Ensure other .htmx-indicator elements are not globally affected if they don't follow this pattern */
/* This is mostly a safeguard if .htmx-indicator is used elsewhere without the .htmx-submit-indicate parent context */
.htmx-indicator:not(.button-text-loading) {
    /* Default display none is already there, but this can be for overrides if needed */
}

/* Icon circle container for consistent circular styling */
.icon-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.profile-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(13, 110, 253, 0.2);
}

.feature-circle {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
}