/* Tailwind CSS directives */
/* @import "tailwindcss"; */

/* Container Query Classes for Sitecore Compatibility */
.cq-container {
    container-type: inline-size;
}

/* Modern container queries with @container syntax */
@container (width >= 48rem) {
    .cq-3xl-py-90 {
        padding-block: 90px;
    }

    .cq-3xl-grid {
        display: grid;
    }

    .cq-3xl-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cq-3xl-flex-row {
        flex-direction: row;
    }

    .cq-3xl-flex-row-reverse {
        flex-direction: row-reverse;
    }

    .cq-3xl-pb-0 {
        padding-bottom: 0;
    }

    .cq-3xl-w-55-percent {
        width: 55%;
    }

    .cq-3xl-w-43-percent {
        width: 43%;
    }

    .cq-3xl-min-w-250 {
        min-width: 250px;
    }

    .cq-3xl-max-w-440 {
        max-width: 440px;
    }

    .cq-3xl-pr-24 {
        padding-right: 24px;
    }

    .cq-3xl-pl-24 {
        padding-left: 24px;
    }

    .cq-3xl-mr-24 {
        margin-right: calc(0.25rem * 24);
    }
}

@container (width >= 56rem) {
    .cq-4xl-min-h-914 {
        min-height: 914px;
    }

    .cq-4xl-pt-288 {
        padding-top: 288px;
    }

    .cq-4xl-text-115 {
        font-size: 115px;
    }

    .cq-4xl-leading-138 {
        line-height: 138px;
    }

    .cq-4xl-pt-84 {
        padding-top: 84px;
    }

    .cq-4xl-text-28 {
        font-size: 28px;
    }

    .cq-4xl-leading-42 {
        line-height: 42px;
    }
}

@container (width >= 64rem) {
    .cq-5xl-w-1\/2 {
        width: 50%;
    }

    .cq-5xl-absolute {
        position: absolute;
    }

    .cq-5xl-min-w-400 {
        min-width: 400px;
    }

    .cq-5xl-max-w-660 {
        max-width: 660px;
    }

    .cq-5xl-pr-48 {
        padding-right: 48px;
    }

    .cq-5xl-pl-48 {
        padding-left: 48px;
    }
}

@container (width >= 72rem) {
    .cq-6xl-flex {
        display: flex;
    }

    .cq-6xl-hidden {
        display: none;
    }

    .cq-6xl-px-14 {
        padding-inline: calc(0.25rem * 14);
    }

    .cq-6xl-py-5 {
        padding-block: calc(0.25rem * 5);
    }

    .cq-6xl-py-20 {
        padding-block: calc(0.25rem * 20);
    }

    .cq-6xl-grid-cols-repeat-6-auto {
        grid-template-columns: repeat(6, auto);
    }

    .cq-6xl-grid-cols-repeat-4-auto {
        grid-template-columns: repeat(4, auto);
    }

    .cq-6xl-gap-8 {
        gap: calc(0.25rem * 8);
    }

    .cq-6xl-gap-0 {
        gap: 0;
    }

    .cq-6xl-justify-between {
        justify-content: space-between;
    }

    .cq-6xl-col-span-1 {
        grid-column: span 1 / span 1;
    }

    .cq-6xl-mb-14 {
        margin-bottom: calc(0.25rem * 14);
    }

    .cq-6xl-top-5rem {
        top: 5rem;
    }

    .cq-6xl-h-auto {
        height: auto;
    }

    .cq-6xl-rounded-b-3xl {
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
    }

    .cq-6xl-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cq-6xl-overflow-y-auto {
        overflow-y: auto;
    }

    .cq-6xl-flex-row {
        flex-direction: row;
    }

    .cq-6xl-max-w-60 {
        max-width: 15rem;
    }

    .cq-6xl-right-14 {
        right: calc(0.25rem * 14);
    }

    .cq-6xl-pr-14 {
        padding-right: calc(0.25rem * 14);
    }

    .cq-6xl-pl-14 {
        padding-left: calc(0.25rem * 14);
    }

    .cq-6xl-flex {
        display: flex;
    }

    .cq-6xl-hidden {
        display: none;
    }

    .cq-6xl-grid {
        display: grid;
    }

    .cq-6xl-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cq-6xl-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cq-6xl-w-auto {
        width: auto;
    }

    .cq-6xl-h-full {
        height: 100%;
    }

    .cq-6xl-min-h-510px {
        min-height: 510px;
    }

    .cq-6xl-aspect-auto {
        aspect-ratio: auto;
    }

    .cq-6xl-content-between {
        align-content: space-between;
    }
}

.size-6 {
  height: 1.5rem;
  width: 1.5rem;
} 

/* Alpine.js cloak to prevent flash */
[x-cloak] { 
  display: none !important; 
}

/* Chat scroll behavior */
.chat-messages {
  scroll-behavior: smooth;
}

/* Chat formatted response styles */
.formatted-response .intro-text {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: white;
}

.formatted-response .closing-text {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

.formatted-response .product-item {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.formatted-response .product-item:last-of-type {
  border-bottom: none;
}

.formatted-response .product-item h4 {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  color: white;
}

.formatted-response .features-list {
  margin: 8px 0;
}

.formatted-response .feature-item {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.9);
}

.formatted-response .product-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.formatted-response .btn-detail {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.formatted-response .btn-detail:hover {
  background: rgba(255, 255, 255, 0.3);
}

.formatted-response .btn-apply {
  background: #FF6B35;
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.formatted-response .btn-apply:hover {
  background: #E55A2B;
}

/* Smooth scrolling */
html {
    overscroll-behavior: none;
    scroll-behavior: smooth;
}


/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Custom component styles */
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Interactive hover effects */
.interactive-card {
    transition: all 0.3s ease;
}

.interactive-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Additional utility classes */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.backdrop-blur {
    backdrop-filter: blur(10px);
}

/* Alpine.js x-cloak directive */
[x-cloak] {
    display: none !important;
}

/* Smooth transitions for news section */
.news-section-transition {
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-section-enter {
    opacity: 0;
    transform: translateY(12px);
}

.news-section-enter-active {
    opacity: 1;
    transform: translateY(0);
}

.news-section-leave {
    opacity: 1;
    transform: translateY(0);
}

.news-section-leave-active {
    opacity: 0;
    transform: translateY(-12px);
}

.scrollbar-hide {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* Animation delays for staggered effects */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* custom font */
.typography-heading-2 {
    font-size: 3.75rem;
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: -0.02em;
}

.typography-heading-4 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.1em;
    letter-spacing: -0.02em;
}

.typography-heading-5 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: -0.02em;
}

.typography-heading-6 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1em;
    letter-spacing: -0.02em;
}

.typography-paragraph-main {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5em;
}

.typography-paragraph-sm {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4em;
}

.typography-link {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 0.9em;
    letter-spacing: -0.02em;
    text-decoration: none;
}

/* MAIN LAYOUT & ASSISTANT DRAWER */
.container {
    /* important : override tailwind container max-width on all breakpoints */
    max-width: 1280px !important;
}
#main-content {
    transition: margin 0.2s linear;
}
#side-content {
    position: fixed;
    top: 0;
    height: 100svh;
    z-index: 99;
    transition: right 0.2s linear;
}

/* Mobile responsive gradient background */
@media (max-width: 768px) {
    #side-content {
        background: linear-gradient(174.33deg, #0A7081 -7.25%, #02171B 223.59%);
        padding: 24px !important;
    }
}

/* Desktop background */
@media (min-width: 769px) {
    #side-content {
        background: linear-gradient(174.33deg, #0A7081 -7.25%, #02171B 223.59%);
    }
}

.no-border-first-child > *:first-child > * {
    border: none !important;
}
.no-border-last-child > *:last-child > * {
    border: none !important;
}

.spaced-inline-items > * {
    margin-left: 8px;
    margin-bottom: 16px;
}
.spaced-inline-items > *:first-child {
    margin-left: 0;
}
.assistant-button:hover {
    transform: scale(1.12);
}

/* COMPONENT : hero-banner */
.hero-banner-title,
.hero-banner-description {
    text-shadow: 0 0 40px #000;
}

/* COMPONENT : story-card */
div:has(.story-card:hover) .story-card-dim {
    opacity: 1;
}
div > .story-card:hover .story-card-dim {
    opacity: 0;
}
.story-card-zoom > img {
    transition: transform 0.15s ease-out;
}
.story-card-zoom:hover > img {
    transition: transform 0.3s ease-in;
    transform: scale(1.1);
}

.mobile-wrap {
  column-count: 2;
  column-gap: 1.5rem;
}
.mobile-wrap .grid {
  break-inside: avoid; /* prevent breaking inside an item */
  margin-bottom: 2.4rem;
}


/* APPLICATION PAGE BACKGROUND */
.background-application {
    /* backdrop-filter: blur(244px); */
    /* background: radial-gradient(ellipse 1739px 1160px at calc(100% + 52px) -146px, rgba(251, 146, 60, 1) 0%, rgba(255, 255, 255, 1) 70%); */
    background: radial-gradient(ellipse 139% 132% at bottom left, #ffffff 85%, rgba(249, 115, 22, 0.2) 90%, rgba(249, 115, 22, 1) 100%);
    background-repeat: no-repeat;
}

.background-gradient-header-cc {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0) 90%
    );
}

@media screen and (min-width: 0px) and (max-width: 600px) {
    .background-application {
        backdrop-filter: blur(244px);
        background: radial-gradient(ellipse 1739px 1160px at calc(100% + 52px) -146px, rgba(251, 146, 60, 1) 0%, rgba(255, 255, 255, 1) 40%);
        background-repeat: no-repeat;
    }
    .background-gradient-otp {
        backdrop-filter: blur(244px);
        background: radial-gradient(ellipse 1739px 1160px at calc(100% + 52px) -146px, rgba(251, 146, 60, 1) 0%, rgba(255, 255, 255, 1) 35%);
        background-repeat: no-repeat;
    }
}

.bg-stats-1, .bg-stats-2, .bg-stats-3 {
    background: #F15A22;
    overflow: hidden;
    position: relative;
}
.bg-stats-1 {
    background: linear-gradient(150deg, rgb(252, 153, 4) 2%, rgb(241, 90, 34) 43%, rgb(254, 160, 124) 95%);
}
.bg-stats-2 {
    &::before {
        content: '';
        position: absolute;
        width: 50%;
        height: 167px;
        right: 0;
        top: 0;
        background-image: url('/icons/bg/stat-2-2.png');
    }
}
.bg-stats-3 {
    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: -45%;
        left: 0;
        background-image: url('/icons/bg/stat-3-1.png');
    }
    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        right: -20%;
        bottom: -10%;
        background-image: url('/icons/bg/stat-3-2.png');
    }
}

/* FLOATING LABEL STYLES */
.peer ~ label {
    top: 36% !important;
}
.peer:focus ~ label,
.peer:not(:placeholder-shown) ~ label {
    top: 20% !important;
    font-size: 12px !important;
    color: black !important;
    opacity: 0.6;
}

@media screen and (min-width: 0px) and (max-width: 600px) {
    .peer ~ label {
        top: 32% !important;
    }

    .peer:focus ~ label,
    .peer:not(:placeholder-shown) ~ label {
        top: 20% !important;
        font-size: 10px !important;
        line-height: 1;
        color: black !important;
        opacity: 0.6;
    }
}

/* Error state floating labels */
.peer:focus.border-red-400 ~ label,
.peer:not(:placeholder-shown).border-red-400 ~ label {
    color: #f87171 !important;
}

/* Success state floating labels */
.peer:focus.border-green-400 ~ label,
.peer:not(:placeholder-shown).border-green-400 ~ label {
    color: #34d399 !important;
}

/* Focus states for inputs */
.peer:focus {
    outline: none;
    border-color: #1685a3 !important;
    box-shadow: 0 0 0 2px rgba(22, 133, 163, 0.1) !important;
}

.peer:focus.border-red-400 {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.1) !important;
}

.peer:focus.border-green-400 {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.1) !important;
}

input::placeholder {
  color: transparent !important;
}

input::placeholder {
  color: transparent !important;
}
input::-webkit-input-placeholder {
  color: transparent !important;
}
input:-ms-input-placeholder {
  color: transparent !important;
}

input, textarea, select {
  -webkit-text-size-adjust: 100% !important;
}

input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

/* countdown  */
.counter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: conic-gradient(
    orange 0deg,
    orange 360deg,
    gray 360deg
  );
  animation: countdown 60s linear forwards;
}

.desc-otp {
  b {
      color: #000000;
  }
}

@keyframes countdown {
  from {
    background: conic-gradient(orange 0deg, gray 0deg);
  }
  to {
    background: conic-gradient(orange 360deg, gray 360deg);
  }
}

.custom-form-label {
    /* Base styles (matches Tailwind: absolute top-6 left-4 text-xs text-color-gray-150 bg-white transition-all duration-300 pointer-events-none) */
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    font-size: 0.75rem;
    color: var(--color-color-gray-150);
    transition: all 0.3s;
    pointer-events: none;
}

.custom-form-label.focus {
    top: 0.5rem;
}

.custom-form-field {
    /* Base styles (matches Tailwind: pt-8 pb-3 px-4 w-full rounded-2xl border border-color-gray-50 bg-white text-sm leading-none placeholder-transparent outline-0 transition-all duration-300) */
    padding-top: 2rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    border-radius: 1rem;
    border: 1px solid var(--color-color-gray-50); /* color-color-gray-50 */
    font-size: 0.875rem; /* 14px, Tailwind text-sm */
    line-height: 1.25;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Custom select arrow (chevron) positioned at the bottom right of the select */
select.custom-form-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Chevron-down SVG as background image, positioned bottom right */
    background: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6 8L10 12L14 8' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 1rem bottom 0.75rem/1em auto;
    padding-right: 2.5rem; /* Space for chevron */

    /* Hide default arrow in IE/Edge */
    &::-ms-expand {
        display: none;
    }
}

/* Responsive font size for md screens (matches Tailwind md:text-base) */
@media (min-width: 768px) {
    .custom-form-field {
        font-size: 1rem; /* 16px */
    }
}

/* Focus state (matches Tailwind focus:border-color-blue-100) */
.custom-form-field:focus {
    border-color: var(--color-color-blue-100); /* color-color-blue-100 */
}

.custom-form-submit {
    /* inline-block font-semibold rounded-full cursor-pointer whitespace-nowrap bg-color-blue-100 text-white hover:bg-color-blue-50 transition-colors duration-300 text-sm cq-6xl:text-base leading-[0.9] px-5 py-3 cq-6xl:px-8 cq-6xl:py-6 w-full */
    display: inline-block;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    background-color: var(--color-color-blue-100);
    color: white;
    transition: background-color 0.3s, color 0.3s;
    font-size: 0.875rem;
    line-height: 0.9;
    padding: 1.5rem 2rem;
    width: 100%;
    border-radius: 100px;
    border: none;
    outline: none;
    transition: background-color 0.3s, color 0.3s;
}

@media (min-width: 768px) {
    .custom-form-submit {
        font-size: 1rem;
    }
}

.custom-form-image {
    /* hidden md:block bg-cover bg-center bg-no-repeat w-[400px] flex-shrink-0 md:rounded-r-2xl */
    display: none;
    width: 400px;
    flex-shrink: 0;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    background-image: url('/images/bg-hero/event-hero-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .custom-form-image {
        display: block;
    }
}

/* Product Card Container - Fix for rounded corners when chat is open */
.product-card-container {
  border-radius: 1.5rem;
}

.product-card-container .absolute.inset-0 {
  border-radius: 1.5rem;
}