/**
 * Shared Page Header Styles
 * Used by: appointment-booked.php, appointment-doctor.php, whitepaper-booked.php
 * These pages share similar header/topbar styles
 */

/* ==========================================
   TOPBAR STYLES (Pink bar with contact info)
   ========================================== */
.cgu-topbar,
.ad-topbar,
.wp-topbar {
    background: #F5E6E0;
    padding: 10px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
}

.cgu-topbar-item,
.ad-topbar-item,
.wp-topbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans';
    font-size: 14px;
    color: #202B6D;
    text-decoration: none;
}

.cgu-topbar-item i,
.ad-topbar-item i,
.wp-topbar-item i {
    font-size: 14px;
    color: #202B6D;
}

.cgu-topbar-item:hover,
.ad-topbar-item:hover,
.wp-topbar-item:hover {
    color: #F75C48;
}

/* ==========================================
   MAIN HEADER STYLES (Blue bar with logo/nav)
   ========================================== */
.cgu-header,
.ad-header,
.wp-header {
    background: #202B6D;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cgu-logo,
.ad-logo,
.wp-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.cgu-logo img,
.ad-logo img,
.wp-logo img {
    height: 45px;
    width: auto;
}

.cgu-nav,
.ad-nav,
.wp-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.cgu-nav-link,
.ad-nav-link,
.wp-nav-link {
    font-family: 'DM Sans';
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cgu-nav-link:hover,
.ad-nav-link:hover,
.wp-nav-link:hover {
    color: #89CFF0;
}

.cgu-cta-btn {
    font-family: 'DM Sans';
    font-size: 16px;
    font-weight: 600;
    color: #202B6D;
    background: #F5C842;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cgu-cta-btn:hover {
    background: #e5b832;
    transform: translateY(-2px);
}

/* ==========================================
   RESPONSIVE STYLES
   ========================================== */
@media (max-width: 992px) {
    .cgu-header,
    .ad-header,
    .wp-header {
        padding: 15px 20px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .cgu-nav,
    .ad-nav,
    .wp-nav {
        gap: 20px;
    }

    .ad-nav,
    .wp-nav {
        gap: 25px;
    }

    .cgu-logo img,
    .ad-logo img,
    .wp-logo img {
        height: 38px;
    }
}

@media (max-width: 768px) {
    .cgu-topbar,
    .ad-topbar,
    .wp-topbar {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .cgu-header,
    .ad-header,
    .wp-header {
        flex-direction: column;
        text-align: center;
    }

    .cgu-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .ad-header,
    .wp-header {
        gap: 20px;
    }

    .ad-nav,
    .wp-nav {
        gap: 30px;
    }

    .cgu-cta-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}