/* Custom CSS for France Project */

/* Custom Color Palette */
:root {
    --custom-teal: #FFC60B;
    --custom-teal-50: rgba(255, 198, 11, 0.05);
    --custom-teal-100: rgba(255, 198, 11, 0.1);
    --custom-teal-200: rgba(255, 198, 11, 0.2);
    --custom-teal-300: rgba(255, 198, 11, 0.3);
    --custom-teal-400: rgba(255, 198, 11, 0.4);
    --custom-teal-500: rgba(255, 198, 11, 0.5);
    --custom-teal-600: rgba(255, 198, 11, 0.6);
    --custom-teal-700: rgba(255, 198, 11, 0.7);
    --custom-teal-800: rgba(255, 198, 11, 0.8);
    --custom-teal-900: rgba(255, 198, 11, 0.9);
    
    /* Additional Colors */
    --custom-hero: #343434;
    --custom-accent: #e6b209;
    --custom-dark: #343434;
    --custom-flash: #fff1c3;
}

/* Custom Teal Color Classes */
.bg-custom-teal {
    background-color: var(--custom-teal) !important;
}

/* Additional Custom Classes */
.bg-custom-hero {
    background-color: var(--custom-hero) !important;
}

.text-custom-accent {
    color: var(--custom-accent) !important;
}

.text-custom-dark {
    color: var(--custom-dark) !important;
}

.bg-custom-flash {
    background-color: var(--custom-flash) !important;
}

.from-custom-teal {
    --tw-gradient-from: var(--custom-teal) !important;
    --tw-gradient-to: var(--custom-accent) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-custom-accent {
    --tw-gradient-to: var(--custom-accent) !important;
}

.from-custom-accent {
    --tw-gradient-from: var(--custom-accent) !important;
    --tw-gradient-to: var(--custom-teal) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-custom-teal {
    --tw-gradient-to: var(--custom-teal) !important;
}

.hover\:from-custom-accent:hover {
    --tw-gradient-from: var(--custom-accent) !important;
    --tw-gradient-to: var(--custom-teal) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.hover\:to-custom-teal:hover {
    --tw-gradient-to: var(--custom-teal) !important;
}

.shadow-custom-teal-200 {
    --tw-shadow-color: var(--custom-teal-200) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}

.hover\:shadow-custom-accent-300:hover {
    --tw-shadow-color: rgba(230, 178, 9, 0.3) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}

.text-custom-teal {
    color: var(--custom-teal) !important;
}

.border-custom-teal {
    border-color: var(--custom-teal) !important;
}

.ring-custom-teal {
    --tw-ring-color: var(--custom-teal) !important;
}

/* Hover States */
.hover\:bg-custom-teal:hover {
    background-color: var(--custom-teal) !important;
}

.hover\:text-custom-teal:hover {
    color: var(--custom-teal) !important;
}

.hover\:border-custom-teal:hover {
    border-color: var(--custom-teal) !important;
}

/* Focus States */
.focus\:ring-custom-teal:focus {
    --tw-ring-color: var(--custom-teal) !important;
}

.focus\:border-custom-teal:focus {
    border-color: var(--custom-teal) !important;
}

/* Custom Teal Shades */
.bg-custom-teal-50 {
    background-color: var(--custom-teal-50) !important;
}

.bg-custom-teal-100 {
    background-color: var(--custom-teal-100) !important;
}

.bg-custom-teal-200 {
    background-color: var(--custom-teal-200) !important;
}

.bg-custom-teal-300 {
    background-color: var(--custom-teal-300) !important;
}

.bg-custom-teal-400 {
    background-color: var(--custom-teal-400) !important;
}

.bg-custom-teal-500 {
    background-color: var(--custom-teal-500) !important;
}

.bg-custom-teal-600 {
    background-color: var(--custom-teal-600) !important;
}

.bg-custom-teal-700 {
    background-color: var(--custom-teal-700) !important;
}

.bg-custom-teal-800 {
    background-color: var(--custom-teal-800) !important;
}

.bg-custom-teal-900 {
    background-color: var(--custom-teal-900) !important;
}

/* Text Colors */
.text-custom-teal-50 {
    color: var(--custom-teal-50) !important;
}

.text-custom-teal-100 {
    color: var(--custom-teal-100) !important;
}

.text-custom-teal-200 {
    color: var(--custom-teal-200) !important;
}

.text-custom-teal-300 {
    color: var(--custom-teal-300) !important;
}

.text-custom-teal-400 {
    color: var(--custom-teal-400) !important;
}

.text-custom-teal-500 {
    color: var(--custom-teal-500) !important;
}

.text-custom-teal-600 {
    color: var(--custom-teal-600) !important;
}

.text-custom-teal-700 {
    color: var(--custom-teal-700) !important;
}

.text-custom-teal-800 {
    color: var(--custom-teal-800) !important;
}

.text-custom-teal-900 {
    color: var(--custom-teal-900) !important;
}

/* Border Colors */
.border-custom-teal-50 {
    border-color: var(--custom-teal-50) !important;
}

.border-custom-teal-100 {
    border-color: var(--custom-teal-100) !important;
}

.border-custom-teal-200 {
    border-color: var(--custom-teal-200) !important;
}

.border-custom-teal-300 {
    border-color: var(--custom-teal-300) !important;
}

.border-custom-teal-400 {
    border-color: var(--custom-teal-400) !important;
}

.border-custom-teal-500 {
    border-color: var(--custom-teal-500) !important;
}

.border-custom-teal-600 {
    border-color: var(--custom-teal-600) !important;
}

.border-custom-teal-700 {
    border-color: var(--custom-teal-700) !important;
}

.border-custom-teal-800 {
    border-color: var(--custom-teal-800) !important;
}

.border-custom-teal-900 {
    border-color: var(--custom-teal-900) !important;
}

/* Ring Colors for Focus States */
.ring-custom-teal-50 {
    --tw-ring-color: var(--custom-teal-50) !important;
}

.ring-custom-teal-100 {
    --tw-ring-color: var(--custom-teal-100) !important;
}

.ring-custom-teal-200 {
    --tw-ring-color: var(--custom-teal-200) !important;
}

.ring-custom-teal-300 {
    --tw-ring-color: var(--custom-teal-300) !important;
}

.ring-custom-teal-400 {
    --tw-ring-color: var(--custom-teal-400) !important;
}

.ring-custom-teal-500 {
    --tw-ring-color: var(--custom-teal-500) !important;
}

.ring-custom-teal-600 {
    --tw-ring-color: var(--custom-teal-600) !important;
}

.ring-custom-teal-700 {
    --tw-ring-color: var(--custom-teal-700) !important;
}

.ring-custom-teal-800 {
    --tw-ring-color: var(--custom-teal-800) !important;
}

.ring-custom-teal-900 {
    --tw-ring-color: var(--custom-teal-900) !important;
}

/* Additional Utility Classes */
.from-custom-teal {
    --tw-gradient-from: var(--custom-teal) !important;
    --tw-gradient-to: rgba(255, 198, 11, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-custom-teal {
    --tw-gradient-to: var(--custom-teal) !important;
}

.via-custom-teal {
    --tw-gradient-to: rgba(255, 198, 11, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--custom-teal), var(--tw-gradient-to) !important;
}

/* Shadow Colors */
.shadow-custom-teal {
    --tw-shadow-color: var(--custom-teal) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}

/* Custom Components */
.btn-custom-teal {
    background-color: var(--custom-teal) !important;
    color: #343434 !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-custom-teal:hover {
    background-color: var(--custom-accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 198, 11, 0.3) !important;
}

/* Custom Gradient Button */
.btn-custom-gradient {
    background: linear-gradient(to right, var(--custom-teal), var(--custom-accent)) !important;
    color: var(--custom-dark) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-custom-gradient:hover {
    background: linear-gradient(to right, var(--custom-accent), var(--custom-teal)) !important;
    transform: translateY(-1px) !important;
}

.btn-custom-teal-outline {
    background-color: transparent !important;
    color: var(--custom-teal) !important;
    border: 2px solid var(--custom-teal) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-custom-teal-outline:hover {
    background-color: var(--custom-teal) !important;
    color: #343434 !important;
}

/* Custom Card with Teal Accent */
.card-custom-teal {
    border-left: 4px solid var(--custom-teal) !important;
    box-shadow: 0 2px 8px rgba(255, 198, 11, 0.1) !important;
}

/* Custom Input Focus */
.input-custom-teal:focus {
    border-color: var(--custom-teal) !important;
    box-shadow: 0 0 0 3px rgba(255, 198, 11, 0.1) !important;
}

/* Custom Link Hover */
.link-custom-teal {
    color: var(--custom-teal) !important;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out !important;
}

.link-custom-teal:hover {
    color: var(--custom-accent) !important;
    text-decoration: underline !important;
}

/* Custom Button */
.coupon-detail {
    margin: 0;
    /* min-width: 270px; */
    /* padding-right: 35px; */
    flex-shrink: 0;
}
.showcode {
    position: relative;
    z-index: 1;
}

.coupon-detail .coupon-button {
    font-size: 14px;
    letter-spacing: 0;
}

.coupon-detail .coupon-button {
    margin: 0;
    text-transform: none;
    background: 0 0;
    border-radius: 15px;
    border: 1px dashed #FFC60B;
    width: 235px;
    line-height: 21px;
    padding: 14px 12px;
}

.coupon-button-type .coupon-code {
    color: #444;
    text-align: right;
    font-size: 20px;
    border: 2px solid #DDD;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.coupon-button-type .coupon-code:hover {
    border-color: #FFC60B;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 198, 11, 0.2);
}

.coupon-button-type .coupon-code:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(255, 198, 11, 0.1);
}
.coupon-code .code-text {
    text-transform: uppercase;
}

.coupon-code .code-text {
    font-size: 15px;
    color: #212121;
    font-weight: 400;
}
.coupon-code .get-code {
    background: #FFC60B !important;
    /* padding: 15px 12px 15px 20px; */
    border-radius: 15px 0 0 15px;
    width: 82%;
    left: -1px;
    top: -1px;
    font-size: 15px;
    text-align: center;
    line-height: 18px;
    border-radius: 15px 0 0 15px;
}
.coupon-code .get-code {
    position: absolute;
    left: -2px;
    top: -2px;
    background: #FFC60B !important;
    color: #343434;
    font-size: 16px;
    padding: 18px 30px 18px 16px;
    border-radius: 15px 0 0 15px;
    -webkit-transition: all 0.5s 
ease;
    transition: all 0.5s 
ease;
    /* min-width: 55%; */
    text-align: left;
}

.coupon-detail .coupon-button.getdeal-btn {
    background: #FFC60B !important;
    border: none;
    color: #343434;
    width: 235px;
    cursor: pointer;
    font-size: 16px;
    padding: 18px 30px 18px 16px;
    border-radius: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coupon-detail .coupon-button.getdeal-btn:hover {
    background: #e6b209 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 198, 11, 0.3);
}

.coupon-detail .coupon-button.getdeal-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(255, 198, 11, 0.2);
}

.coupon-detail .coupon-button.getdeal-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.coupon-detail .coupon-button.getdeal-btn:hover::before {
    left: 100%;
}

/* Desktop Coupon Logo and Badge */
@media (min-width: 1024px) {
    .coupon-desktop-logo,
    .coupon-desktop-badge {
        display: flex !important;
    }
    .coupon-mobile-section {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .coupon-desktop-logo,
    .coupon-desktop-badge {
        display: none !important;
    }
    .coupon-mobile-section {
        display: flex !important;
        max-width: 100%;
        overflow-x: hidden;
    }
    .group[data-deal-id] {
        /* overflow-x: hidden; */
        max-width: 100%;
    }
}

/* Responsive CSS moved to responsive.css file */

/* .coupon-code .get-code:after {
    border-left-color: #00bcd4 !important;
    border-left-width: 20px;
    border-bottom: 48px solid transparent;
    right: -19px;
    top: 0px;
    border-top: none;
}

.coupon-code .get-code:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 45px solid transparent;
    border-left: 44px solid rgb(15 118 110 / var(--tw-bg-opacity, 1)) !important;
    position: absolute;
    right: -43px;
    top: -1px;
} */