/* =========================================================
   Compatible devices & How it works mobile dropdown
   ========================================================= */

.airalo-dropdown-header {
    display: none;
}

@media (max-width: 991px) {
    #airaloCompNavWrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        position: relative;
    }

    .airalo-dropdown-header {
        display: flex !important;
        background: #ffffff;
        border: 1.5px solid #EAEAEA;
        border-radius: 12px;
        padding: 14px 18px;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: 600;
        font-size: 15px;
        color: #1a1a1a;
        z-index: 10001;
        transition: border-radius 0.2s, border-color 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .airalo-dropdown-header.is-active {
        border-radius: 12px 12px 0 0;
        border-color: #2968F6;
    }

    .airalo-dropdown-header svg {
        transition: transform 0.3s ease;
    }

    /* The Options Container */
    .airalo-comp-nav-container {
        display: none !important; /* Hidden by default */
        flex-direction: column !important;
        background: #fff !important;
        border: 1.5px solid #EAEAEA !important;
        border-top: none !important;
        border-radius: 0 0 12px 12px !important;
        width: calc(100% - 32px) !important;
        position: absolute !important;
        top: 66px !important; 
        left: 16px !important;
        z-index: 10000 !important;
        box-shadow: 0 8px 16px rgba(0,0,0,0.08) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .airalo-comp-nav-container.is-open {
        display: flex !important;
    }

    /* Individual Option Styling - ALL PILLS BASE RESET */
    .airalo-comp-nav-pill {
        width: 100% !important;
        padding: 16px 20px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid #F5F5F5 !important;
        justify-content: flex-start !important;
        text-decoration: none !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        outline: none !important;
        transform: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .airalo-comp-nav-pill:last-child {
        border-bottom: none !important;
    }

    /* NEUTRAL / INACTIVE STATE - FORCE GRAY FOR ALL NON-ACTIVE PILLS
       Covers :link, :visited, :hover, :focus, :active, and all child elements (span, svg) */
    .airalo-comp-nav-pill:not(.is-active),
    .airalo-comp-nav-pill:not(.is-active):link,
    .airalo-comp-nav-pill:not(.is-active):visited,
    .airalo-comp-nav-pill:not(.is-active):hover,
    .airalo-comp-nav-pill:not(.is-active):focus,
    .airalo-comp-nav-pill:not(.is-active):active,
    .airalo-comp-nav-pill:not(.is-active) span,
    .airalo-comp-nav-pill:not(.is-active) svg {
        color: #4A4A4A !important;
        background: #ffffff !important;
        font-weight: 400 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .airalo-comp-nav-pill:not(.is-active) svg {
        color: #4A4A4A !important;
        transform: none !important;
    }

    /* ACTIVE STATE - ONLY THE CURRENTLY ACTIVE PILL IS BLUE */
    .airalo-comp-nav-pill.is-active,
    .airalo-comp-nav-pill.is-active:link,
    .airalo-comp-nav-pill.is-active:visited,
    .airalo-comp-nav-pill.is-active:hover,
    .airalo-comp-nav-pill.is-active:focus,
    .airalo-comp-nav-pill.is-active:active,
    .airalo-comp-nav-pill.is-active span {
        color: #2968F6 !important;
        background: #FAFAFA !important;
        font-weight: 700 !important;
    }

    .airalo-comp-nav-pill.is-active svg {
        color: #2968F6 !important;
    }
}
/*End comptiable and how it works css */

/* homepage css start */
body .why-choose-block .section-title {
    margin-bottom: 8px !important;
}
body section.norflo-destinations-section.e-sim-provider-destinations-area, body .e-sim-provider-choose-area, body .how-it-works .features-area {
    padding: 80px 0;
}
/* homepage css end */

/* Footer css start */
body .copyright-area p {
    padding: 5px 0;
}
body .footer-area.pb-75 {
    padding-bottom: 40px;
}
body .footer-single-widget .social-links li a i {
    color: #A9A3A3;
}
/* Footer css start */


/* Target the header between 992px and 1200px */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    /* 1. Ensure the container doesn't wrap its children */
    .container.mw-1685 {
        flex-wrap: nowrap !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 2. Force the navigation menu to show and stay in one line */
    #navbarSupportedContent {
        display: flex !important;
        flex-basis: auto !important;
        align-items: center !important;
    }

    .navbar-nav {
        flex-direction: row !important;
    }

    /* 3. Reduce spacing between the menu links */
    .navbar-nav > li {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    /* 4. Reduce space between the links and the right-side icons (CAD/User) */
    .others-options {
        margin-left: 15px !important;
    }

    /* 5. Reduce space between individual icons/items in the others-options list */
    .others-options li {
        margin-left: 10px !important;
    }

    /* 6. Hide the mobile toggler if it's still appearing */
    .navbar-toggler {
        display: none !important;
    }
}

/*product detail page*/

/* Hide any remaining quantity selectors on single product and variations */
.single-product div.product form.cart .quantity,
.single-product .variations_button .quantity {
    display: none !important;
}

/* =========================================================
   Roamless-Style "Go to Secure Checkout" CTA Button
   ========================================================= */
.single-product div.product form.cart .single_add_to_cart_button,
.single-product .variations_button .single_add_to_cart_button,
.single-product .single_add_to_cart_button.skymovo-checkout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #0A0102 !important; /* Skymovo dark brand onyx color */
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(10, 1, 2, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
}

/* Left side text */
.single-product .skymovo-checkout-btn .btn-left-content {
    display: inline-flex !important;
    align-items: center !important;
    color: #FFFFFF !important;
}

.single-product .skymovo-checkout-btn .skymovo-btn-text {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* Right-side icon badge (Roamless arrow circle) */
.single-product .skymovo-checkout-btn .skymovo-btn-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.single-product .skymovo-checkout-btn .skymovo-arrow-icon {
    stroke: #FFFFFF !important;
}

/* Hover State: Subtle elegant dark lift (DO NOT flip to random light/blue color) */
.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product .variations_button .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button.skymovo-checkout-btn:hover {
    background: #181516 !important; /* stays dark, slightly illuminated */
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 24px rgba(10, 1, 2, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

.single-product .single_add_to_cart_button.skymovo-checkout-btn:hover .skymovo-btn-icon-wrapper {
    background: rgba(255, 255, 255, 0.22) !important;
}

/* Active / Click State */
.single-product .single_add_to_cart_button.skymovo-checkout-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(10, 1, 2, 0.2) !important;
}

/* Disabled state when no variant selected */
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Hide 'Added to cart' and 'View cart' notice banners on Checkout page */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-message .button.wc-forward,
.woocommerce-checkout a.added_to_cart {
    display: none !important;
}

/* =========================================================
   Single Product / Product Details - White Text & Selected Variation Price
   ========================================================= */
.single-product .products-details-content h2,
.single-product .products-details-content h3,
.single-product .products-details-content h3 span.price,
.single-product .products-details-content .price,
.single-product .products-details-content .price .amount,
.single-product .products-details-content .woocommerce-Price-amount,
.single-product .products-details-content .woocommerce-Price-currencySymbol,
.single-product .products-details-content .woocommerce-variation-price,
.single-product .products-details-content .woocommerce-variation-price .price,
.single-product .products-details-content .woocommerce-variation-price .amount,
.single-product .products-details-content .woocommerce-variation-price .woocommerce-Price-amount,
.single-product .products-details-content .woocommerce-variation-description,
.single-product .products-details-content .woocommerce-variation-description p,
.single-product .products-details-content .woocommerce-variation-availability,
.single-product .products-details-content .stock,
.single-product .products-details-content .product_meta,
.single-product .products-details-content .product_meta span,
.single-product .products-details-content .product_meta a {
    color: #FFFFFF !important;
}

/* Ensure Data Plan dropdown label remains dark and readable on its white container */
.single-product .variations label,
.single-product .variations td.label,
.single-product .variations select,
.single-product .variations th {
    color: #1A1A1A !important;
    font-weight: 600 !important;
}

/* Selected variation price - clean and moderately sized */
.single-product .products-details-content .woocommerce-variation-price .price,
.single-product .products-details-content .woocommerce-variation-price .amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    display: inline-block !important;
    margin: 8px 0 6px 0 !important;
    letter-spacing: -0.01em !important;
}

/* Clear variation link */
.single-product .products-details-content .reset_variations {
    color: #FF5A5F !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    margin-left: 8px !important;
}

/* In stock badge / availability notice */
.single-product .products-details-content .woocommerce-variation-availability .stock {
    color: #9FE870 !important; /* Subtle trust green */
    font-weight: 600 !important;
    font-size: 13px !important;
}

/*product detail page*/
/* End product details showing white color */


/* checkout page text white */
.woocommerce-order > .woocommerce-thankyou-order-received,               
    .woocommerce-order > .woocommerce-thankyou-order-details,                
    .woocommerce-order > .woocommerce-thankyou-order-details li,             
    .woocommerce-order > .woocommerce-thankyou-order-details li strong,      
    .woocommerce-order > .woocommerce-thankyou-order-details .amount,        
    .woocommerce-order > .woocommerce-thankyou-order-details bdi,            
    .woocommerce-order > h3,                                                 
    .woocommerce-order > p {                                                 
        color: #ffffff !important;                                           
    }

/*End text white*/

/* destination page */
/* Scope these changes to the Airalo directory only to avoid site-wide conflicts */

.airalo-directory-wrapper .airalo-grid {
    display: grid !important;
    /* Force 3 columns that stay within the container bounds */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
    gap: 16px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Ensure cards handle their internal layout without pushing width */
.airalo-directory-wrapper .airalo-card {
    min-width: 0 !important; /* Critical: allows card to shrink below content width */
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden; /* Contains children */
}

/* Prevent long country names from breaking the card layout */
.airalo-directory-wrapper .airalo-country-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1; /* Allows the name to shrink if space is tight */
}

/* Ensure the flag and name container doesn't overflow */
.airalo-directory-wrapper .airalo-card-left {
    display: flex;
    align-items: center;
    min-width: 0; /* Allows this container to shrink */
    flex: 1; /* Takes available space */
    margin-right: 8px;
}

/* --- Safely Scoped eSIM Directory Fixes --- */

/* 1. Desktop: 3 Columns & Layout Fix */
.airalo-directory-wrapper .airalo-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px;
    width: 100% !important;
    box-sizing: border-box;
}

/* 2. Tablet: 2 Columns (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .airalo-directory-wrapper .airalo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 3. Mobile: 1 Column (below 767px) */
@media (max-width: 767px) {
    .airalo-directory-wrapper .airalo-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 4. Card & Content Safety (Prevents horizontal overflow) */
.airalo-directory-wrapper .airalo-card {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.airalo-directory-wrapper .airalo-card-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.airalo-directory-wrapper .airalo-country-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0;
    flex: 1;
    margin-right: 10px;
}

/* End destination css */

/*contact us page*/
.contact-info-single-item {
    height: 90%;
}
/* End contact us*/