/**
 * GlobeGrade — modern UI layer (loads last; keeps brand colors)
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

/* —— Base —— */
body.gg-site {
    font-family: var(--gg-font) !important;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -.01em;
    background: var(--gg-gradient-soft) !important;
    color: var(--gg-text);
}

body.gg-site::before {
    display: none;
}

body.gg-site h1,
body.gg-site h2,
body.gg-site h3,
body.gg-site h4,
body.gg-site h5 {
    font-family: var(--gg-display) !important;
    letter-spacing: -.025em;
}

body.gg-site a {
    transition: color .2s var(--gg-ease), opacity .2s var(--gg-ease);
}

/* —— Buttons —— */
body.gg-site .btn,
body.gg-site .chat-nw-btn,
body.gg-site .popup-btn,
body.gg-site form.form-subscribe button {
    border-radius: var(--gg-radius-pill) !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    transition: transform .2s var(--gg-ease), box-shadow .2s var(--gg-ease), background .2s !important;
}

body.gg-site .btn-primary,
body.gg-site .btn.btn-primary,
body.gg-site .btn-success,
body.gg-site .chat-nw-btn,
body.gg-site .popup-btn {
    background: var(--gg-gradient-h) !important;
    border: none !important;
    box-shadow: var(--gg-shadow-sm) !important;
}

body.gg-site .btn-primary:hover,
body.gg-site .chat-nw-btn:hover,
body.gg-site .popup-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--gg-shadow-glow) !important;
}

body.gg-site .form-control {
    border-radius: var(--gg-radius) !important;
    border: 1px solid var(--gg-border) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: border-color .2s, box-shadow .2s !important;
}

body.gg-site .form-control:focus {
    border-color: var(--gg-brand) !important;
    box-shadow: 0 0 0 4px rgba(124, 187, 232, .22) !important;
}

/* —— Header —— */
body.gg-site .top-head {
    background: var(--gg-primary) !important;
    border-bottom: none !important;
}

body.gg-site .header.gg-site-header {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 232, 245, .8) !important;
    box-shadow: 0 4px 24px rgba(15, 36, 56, .06) !important;
}

body.gg-site .gg-main-menu {
    background: var(--gg-primary) !important;
    box-shadow: 0 8px 32px rgba(31, 78, 120, .2) !important;
}

/* —— Section headings (legacy pages) —— */
body.gg-site .main-heading h4,
body.gg-site .hm-hed-sec h4 {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
    font-weight: 800 !important;
    position: relative;
    padding-bottom: 12px;
}

body.gg-site .main-heading h4::before,
body.gg-site .hm-hed-sec h4::after {
    width: 48px !important;
    height: 4px !important;
    border-radius: var(--gg-radius-pill) !important;
}

/* —— Cards (global) —— */
body.gg-site .teacher-box,
body.gg-site .home-teacher-modern,
body.gg-site .card-teacher-box,
body.gg-site .step-modern,
body.gg-site .hm-quality-box,
body.gg-site .cntct-box,
body.gg-site .auth-modern-card,
body.gg-site .profile-desc-box {
    border-radius: var(--gg-radius-lg) !important;
    border: 1px solid var(--gg-border) !important;
    box-shadow: var(--gg-shadow) !important;
    transition: transform .25s var(--gg-ease), box-shadow .25s var(--gg-ease), border-color .25s !important;
}

body.gg-site .teacher-box:hover,
body.gg-site .home-teacher-modern:hover,
body.gg-site .card-teacher-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--gg-shadow-md) !important;
    border-color: #a8d4f0 !important;
}

/* —— Search sections —— */
body.gg-site .search-section {
    background: var(--gg-gradient-mesh) !important;
    padding: clamp(40px, 6vw, 64px) 0 !important;
}

body.gg-site .search-inner-div {
    border-radius: var(--gg-radius-xl) !important;
    padding: clamp(20px, 3vw, 28px) !important;
    box-shadow: var(--gg-shadow-lg) !important;
    border: 1px solid rgba(255, 255, 255, .8) !important;
}

body.gg-site .search-inner-div h2 {
    font-weight: 800 !important;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
}

/* —— Listing hero —— */
body.gg-site .listing-profile-hero {
    background: var(--gg-gradient-mesh) !important;
    padding: clamp(28px, 5vw, 48px) 0 !important;
    position: relative;
    overflow: hidden;
}

body.gg-site .listing-profile-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: .6;
    pointer-events: none;
}

body.gg-site .listing-profile-hero .container {
    position: relative;
    z-index: 1;
}

body.gg-site .listing-profile-hero h1 {
    font-weight: 800 !important;
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    text-shadow: 0 2px 20px rgba(15, 36, 56, .15);
}

/* —— Listing tutor cards —— */
body.gg-site .tutor-listing-card {
    border-radius: var(--gg-radius-lg) !important;
    padding: 20px !important;
    box-shadow: var(--gg-shadow) !important;
    border: 1px solid var(--gg-border) !important;
    transition: transform .25s var(--gg-ease), box-shadow .25s var(--gg-ease) !important;
}

body.gg-site .tutor-listing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gg-shadow-md) !important;
}

body.gg-site .tutor-listing-card__media img {
    border-radius: var(--gg-radius-md) !important;
}

body.gg-site .tutor-mode-chip,
body.gg-site .tutor-rating-chip {
    border-radius: var(--gg-radius-pill) !important;
    padding: 6px 12px !important;
}

body.gg-site .tutor-listing-card .chat-nw-btn {
    border-radius: var(--gg-radius-pill) !important;
    padding: 10px 20px !important;
}

/* —— Reviews & FAQs block —— */
body.gg-site .listing-extra-sec {
    background: var(--gg-bg) !important;
}

body.gg-site .listing-review-card,
body.gg-site .listing-faq-row {
    border-radius: var(--gg-radius-lg) !important;
    box-shadow: var(--gg-shadow) !important;
    transition: box-shadow .2s var(--gg-ease) !important;
}

body.gg-site .listing-review-card:hover {
    box-shadow: var(--gg-shadow-md) !important;
}

body.gg-site .listing-faq-row__head {
    border-radius: var(--gg-radius-lg) var(--gg-radius-lg) 0 0;
}

/* —— Footer —— */
body.gg-site section.news-sec {
    background: var(--gg-gradient-mesh) !important;
    padding: clamp(36px, 5vw, 52px) 0 !important;
}

body.gg-site .news-div {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

body.gg-site .news-div p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 1px 8px rgba(15, 36, 56, .12);
}

body.gg-site form.form-subscribe .input-group {
    border-radius: var(--gg-radius-pill);
    overflow: hidden;
    box-shadow: var(--gg-shadow-lg);
    background: #fff;
    padding: 4px;
}

body.gg-site form.form-subscribe .form-control {
    border: none !important;
    border-radius: var(--gg-radius-pill) 0 0 var(--gg-radius-pill) !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
}

body.gg-site form.form-subscribe button {
    border-radius: var(--gg-radius-pill) !important;
    padding: 12px 22px !important;
    background: var(--gg-navy) !important;
}

body.gg-site section.seo-ftr-link {
    background: #fff !important;
    padding: clamp(32px, 4vw, 48px) 0 !important;
}

body.gg-site .seo-ftr-link h4 {
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: var(--gg-navy) !important;
    margin-bottom: 20px;
    text-align: center;
}

body.gg-site .foot-link-sec ul li a {
    font-size: 13px;
    color: var(--gg-muted);
    transition: color .2s, padding-left .2s;
}

body.gg-site .foot-link-sec ul li a:hover {
    color: var(--gg-primary-dark) !important;
    padding-left: 4px;
}

body.gg-site section.foot-scl-sec {
    background: var(--gg-bg) !important;
    padding: 28px 0 !important;
}

body.gg-site .foot-scl-div a {
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s var(--gg-ease), background .2s, color .2s !important;
}

body.gg-site .foot-scl-div a:hover {
    transform: translateY(-3px);
    box-shadow: var(--gg-shadow-sm);
}

body.gg-site .copyright {
    background: var(--gg-primary) !important;
    padding: 18px 0 !important;
}

/* —— Accordion / FAQ pages —— */
body.gg-site .accordion {
    border-radius: var(--gg-radius) !important;
    margin-bottom: 8px;
    font-weight: 600;
    transition: background .2s, color .2s;
}

/* —— Auth —— */
body.gg-site .auth-modern-card {
    border-radius: var(--gg-radius-xl) !important;
    overflow: hidden;
}

body.gg-site .auth-modal .modal-content {
    border-radius: var(--gg-radius-xl) !important;
    overflow: hidden;
}

/* —— Owl carousel —— */
body.gg-site .owl-prev span,
body.gg-site .owl-next span {
    background: #fff !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 50% !important;
    box-shadow: var(--gg-shadow-md) !important;
    font-size: 22px !important;
}

/* —— Homepage sections —— */
.gg-section__title {
    font-weight: 800 !important;
}

.gg-step,
.gg-benefit,
.gg-listing-card {
    border-radius: var(--gg-radius-lg) !important;
}

.gg-step:hover,
.gg-benefit:hover {
    transform: translateY(-4px);
    box-shadow: var(--gg-shadow-md) !important;
}

.gg-listing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gg-shadow-md) !important;
}

.gg-tutor-card__chip {
    border-radius: var(--gg-radius-pill) !important;
}

.gg-cat__icon {
    border-radius: var(--gg-radius-md) !important;
    transition: transform .25s var(--gg-ease);
}

.gg-cat:hover .gg-cat__icon {
    transform: scale(1.08);
}

/* —— Mobile bar —— */
@media (max-width: 991.98px) {
    body.gg-site .gg-main-menu {
        background: rgba(255, 255, 255, .97) !important;
        backdrop-filter: blur(12px);
        box-shadow: 0 2px 20px rgba(15, 36, 56, .08) !important;
    }

    body.gg-site .gg-mobile-bar {
        min-height: 60px;
    }

    body.gg-site .mob-logo-show img {
        max-height: 40px;
    }
}