/* Header Redesign Styles */

/* Top Bar */
.top-bar {
    background-color: #0b163f;
    /* Deep blue from screenshot */
    color: #ffffff;
    padding: 10px 0;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.top-bar a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s;
}

.top-bar a:hover {
    opacity: 0.8;
}

.top-bar-item {
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
}

.top-bar-item i {
    color: #fca311;
    /* Gold/Orange color for icons */
    margin-right: 8px;
    font-size: 1rem;
}

/* Add separator line between email and address */
.top-bar-item:not(:last-child)::after {
    content: "|";
    margin-left: 20px;
    color: rgba(255, 255, 255, 0.3);
}

.top-bar-right {
    text-align: right;
}

/* Navbar */
.navbar-modern {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    border-bottom: none;
}

/* Logo Area */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0b163f !important;
    /* Dark blue text */
    text-transform: uppercase;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 32px !important;
    width: auto !important;
    margin-right: 10px;
}

.navbar-brand span {
    color: #0b163f;
}

/* Navigation Links */
.navbar-modern .nav-link {
    color: #333333 !important;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: color 0.3s ease;
}

.navbar-modern .nav-link:hover,
.navbar-modern .nav-link.active {
    color: #0b163f !important;
}

/* Elegant Underline Hover Effect */
.navbar-modern .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    /* Align to bottom of the link container */
    left: 50%;
    background-color: #3f65f3;
    /* Primary blue */
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.navbar-modern .nav-link:hover::after,
.navbar-modern .nav-link.active::after {
    width: 80%;
    /* Expand to 80% of width */
}

/* Dropdown Menu Styling */
.navbar-modern .dropdown-menu {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 10px 0;
    margin-top: 15px;
    /* Spacing from nav */
}

/* Dropdown link hover */
.navbar-modern .dropdown-item {
    color: #555;
    font-size: 0.95rem;
    padding: 8px 20px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.navbar-modern .dropdown-item:hover,
.navbar-modern .dropdown-item:focus {
    background-color: #f8f9fa;
    color: #3f65f3;
    border-left-color: #3f65f3;
    padding-left: 25px;
    /* Slight shift to right */
}

.navbar-modern .dropdown-toggle::after {
    vertical-align: middle;
    border-top: 5px solid #ccc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    opacity: 0.8;
    margin-left: 5px;
    transition: transform 0.2s;
}

.navbar-modern .nav-link:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Action Buttons Area */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =========================================
   Hero Domain Search Section 
   ========================================= */
.domain-search-hero {
    background: linear-gradient(135deg, #1e57db 0%, #2575fc 100%);
    /* Bright blue gradient */
    padding: 3rem 2rem;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(37, 117, 252, 0.3);
    max-width: 950px;
    position: relative;
    z-index: 10;
    margin-top: -80px;
    /* Strong overlap */
    color: #fff;
    overflow: hidden;
}

/* Background Abstract decoration (optional) */
.domain-search-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

/* Search Box Container */
.domain-search-box-hero {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.search-input-group {
    background: #ffffff;
    border-radius: 50px;
    /* Full pill */
    padding: 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.domain-input-hero {
    border: none;
    background: transparent;
    flex-grow: 1;
    padding: 10px 25px;
    font-size: 1.1rem;
    color: #333;
    outline: none;
}

.domain-input-hero::placeholder {
    color: #999;
}

/* Buttons */
.hero-btn-group {
    display: flex;
    gap: 10px;
}

.btn-hero-search {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    /* Pill */
    font-weight: 600;
    transition: all 0.3s;
}

.btn-hero-search:hover {
    background-color: #333;
    transform: translateY(-2px);
}

.btn-hero-transfer {
    background-color: #fca311;
    /* Yellow/Gold */
    color: #000;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    /* Pill */
    font-weight: 600;
    transition: all 0.3s;
}

.btn-hero-transfer:hover {
    background-color: #e5940e;
    transform: translateY(-2px);
}

/* Pricing Pills */
.pricing-pill {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.pricing-pill:hover {
    background: rgba(255, 255, 255, 0.25);
}

.pricing-pill .ext {
    font-weight: 700;
    font-size: 1.1rem;
}

.pricing-pill .price {
    opacity: 0.9;
    margin-left: 5px;
}

/* =========================================
   Blue Pricing Cards (Iter 4 - Final)
   ========================================= */
.pricing-card-blue {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e0e6ed;
    overflow: hidden;
    padding-top: 30px;
    height: 100%;
}

.pricing-card-blue:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(30, 87, 219, 0.15);
    border-color: #1e57db;
}

/* Hover effect for ALL pricing card columns - elevate on hover */
.col-xl-4.mb-4,
.col-lg-4.mb-4,
.col-md-6.mb-4 {
    position: relative;
    transition: z-index 0s;
}

.col-xl-4.mb-4:hover,
.col-lg-4.mb-4:hover,
.col-md-6.mb-4:hover {
    z-index: 100000 !important;
}

.col-xl-4.mb-4:hover .pricing-card-blue,
.col-lg-4.mb-4:hover .pricing-card-blue,
.col-md-6.mb-4:hover .pricing-card-blue {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-blue-bg {
    width: 80px;
    height: 80px;
    background: #eef4ff;
    /* Light Blue bg */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e57db;
    /* Hero Blue */
    font-size: 2rem;
    box-shadow: 0 10px 20px rgba(30, 87, 219, 0.1);
}

/* Price - Blue (User Request) */
.price-display-blue .currency {
    color: #1e57db;
    /* Hero Blue */
    font-size: 1.5rem;
    vertical-align: top;
    position: relative;
    top: 5px;
}

.price-display-blue .amount {
    color: #1e57db;
    /* Hero Blue */
    font-size: 3.5rem;
    line-height: 1;
}

.price-display-blue .cents {
    color: #1e57db;
    /* Hero Blue */
}

.price-display-blue .period {
    color: #999;
    font-size: 0.9rem;
}

/* Feature List */
.feature-list-blue li {
    font-size: 0.95rem;
    color: #444;
}

.text-blue {
    color: #1e57db !important;
    /* Hero Blue */
}

/* Form Styles */
.cycle-select-blue {
    border: 1px solid #eee;
    background-color: #f8faff;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 0.9rem;
    cursor: pointer;
    color: #333;
}

.cycle-select-blue:focus {
    border-color: #1e57db;
    box-shadow: 0 0 0 0.2rem rgba(30, 87, 219, 0.1);
}

/* Order Button */
.btn-order-blue {
    background-color: #eef4ff;
    /* Very light blue */
    color: #1e57db;
    border: 1px solid transparent;
    padding: 12px 0;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-order-blue:hover {
    background-color: #1e57db;
    color: #fff;
    box-shadow: 0 5px 15px rgba(30, 87, 219, 0.3);
}

/* =========================================
   Featured / Popular Badge
   ========================================= */
/* Base positioning for all pricing columns */
.pricing-card-blue {
    position: relative;
}

/* Column containing featured card gets highest z-index */
.featured-column,
div.featured-column,
div.col-xl-4.featured-column {
    position: relative !important;
    z-index: 9999 !important;
    isolation: isolate !important;
}

.featured-wrapper {
    position: relative !important;
    z-index: 99999 !important;
}

.featured-card {
    position: relative !important;
    border: 2px solid #1e57db !important;
    transform: scale(1.05) !important;
    box-shadow: 0 25px 50px rgba(30, 87, 219, 0.25) !important;
    overflow: visible !important;
    background: #fff !important;
    z-index: 9999 !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-top: -10px !important;
}

.popular-badge {
    position: absolute !important;
    background: #fca311 !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 8px 18px !important;
    top: -15px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    border-radius: 20px !important;
    box-shadow: 0 5px 15px rgba(252, 163, 17, 0.4) !important;
    z-index: 99999 !important;
    letter-spacing: 0.5px !important;
}

.featured-card:hover {
    transform: scale(1.08) !important;
    z-index: 99999 !important;
}

/* Featured column hover maintains top priority */
.featured-column:hover {
    z-index: 99999 !important;
}

@media (max-width: 991px) {
    .featured-card {
        transform: none;
        margin-top: 15px;
    }

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

.btn-signin {
    color: #3f65f3 !important;
    background: transparent !important;
    border: 1px solid #e0e6ed !important;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.btn-signin:hover {
    background: #f8faff !important;
    border-color: #3f65f3 !important;
}

.cart-icon-btn {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    color: #333;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.cart-icon-btn:hover {
    background: #f8f9fa;
    color: #3f65f3;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #fca311;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.search-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3f65f3;
    color: #fff;
    border-radius: 8px;
    border: none;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.search-btn:hover {
    background-color: #2b4ec2;
    color: #fff;
}

.navbar-toggler-custom {
    display: none;
    /* Hidden on desktop */
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    background-color: #3f65f3;
    color: #fff;
    border-radius: 8px;
    border: none;
    font-size: 1.2rem;
}

/* =========================================
   Menu Hover Support 
   ========================================= */
@media (min-width: 992px) {
    .navbar-modern .nav-item.dropdown {
        position: relative;
    }

    .navbar-modern .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        margin-top: 0;
    }

    .navbar-modern .dropdown-menu {
        display: block;
        /* Hidden by opacity/visibility */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        /* Critical Fix: Use padding-top to bridge the gap if needed, or just 0 margin */
        margin-top: 0;
        /* Ensure it's right below */
        top: 100%;
        left: 0;
    }

    /* Invisible bridge to prevent mouse gap */
    .navbar-modern .nav-item.dropdown::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px;
        /* Height of the gap */
        transform: translateY(100%);
        background: transparent;
        z-index: 100;
    }
}

/* Responsive */
@media (max-width: 991.98px) {
    .navbar-toggler-custom {
        display: flex;
    }

    .header-actions {
        margin-left: auto;
        margin-right: 10px;
    }

    .top-bar {
        display: none;
        /* Often hidden on mobile or stacked, hiding for cleaner look as per modern standards, or stack if user prefers. Keeping hidden for now as per common responsive patterns for top bars */
    }

    .navbar-collapse {
        background: #fff;
        padding: 20px;
        margin-top: 15px;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
}

/* =========================================
   Modern Feature Cards (About/Features)
   ========================================= */
.modern-feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.modern-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(30, 87, 219, 0.1);
    border-color: rgba(30, 87, 219, 0.2);
}

.modern-feature-icon {
    width: 80px;
    height: 80px;
    background: #eef4ff;
    /* Light Blue */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1e57db;
    /* Hero Blue */
    font-size: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.modern-feature-card:hover .modern-feature-icon {
    background: #1e57db;
    color: #fff;
    box-shadow: 0 10px 20px rgba(30, 87, 219, 0.2);
}

.modern-feature-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #0b163f;
}

.modern-feature-desc {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

.modern-feature-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #fca311;
    /* Gold */
    color: #fff;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}