/*
 Theme Name:   Flatsome Child — GGDA Export Portal
 Theme URI:    https://iww.co.za
 Description:  Child theme for the GGDA Export Portal. Built on Flatsome by IWW Integrated Marketing.
 Author:       IWW Integrated Marketing
 Author URI:   https://iww.co.za
 Template:     flatsome
 Version:      2.17.0
 Text Domain:  flatsome-child
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    --ggda-red:        #C03E4C;
    --ggda-gold:       #FBBB17;
    --ggda-blue:       #415FAA;
    --ggda-olive:      #B9BE33;
    --ggda-dark:       #1C1C2E;
    --ggda-light:      #F8F8F6;
    --ggda-white:      #FFFFFF;
    --ggda-border:     #E0E0E0;

    --ggda-red-dark:   #A03040;
    --ggda-red-light:  #F5E0E3;
    --ggda-bg:         #F4F5F7;
    --ggda-gold-dark:  #D9A010;
    --ggda-blue-dark:  #2E4580;
    --ggda-blue-light: #EBF0FA;
    --ggda-dark-mid:   #2E2E44;

    --ggda-text:       #1C1C2E;
    --ggda-text-muted: #6B6B80;
    --ggda-text-light: #9999AA;

    --ggda-radius:     6px;
    --ggda-radius-lg:  12px;
    --ggda-shadow:     0 2px 8px rgba(0,0,0,.08);
    --ggda-shadow-md:  0 4px 16px rgba(0,0,0,.12);

    --ggda-font:       'Roboto', sans-serif;
}

/* ==========================================================================
   FLATSOME OVERRIDES
   ========================================================================== */

:root {
    --primary-color:   var(--ggda-red);
    --secondary-color: var(--ggda-blue);
    --header-bg:       var(--ggda-dark);
    --footer-bg:       var(--ggda-dark);
}

.button,
.button.primary,
input[type="submit"],
button[type="submit"] {
    background-color: var(--ggda-red);
    border-color: var(--ggda-red);
    color: var(--ggda-white);
    font-family: var(--ggda-font);
    font-weight: 600;
    border-radius: var(--ggda-radius);
    transition: background-color .2s, border-color .2s;
}

.button:hover,
.button.primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--ggda-red-dark);
    border-color: var(--ggda-red-dark);
    color: var(--ggda-white);
}

.button.secondary       { background-color: var(--ggda-blue); border-color: var(--ggda-blue); color: var(--ggda-white); }
.button.secondary:hover { background-color: var(--ggda-blue-dark); border-color: var(--ggda-blue-dark); color: var(--ggda-white); }

.button.outline       { background-color: transparent; border: 2px solid var(--ggda-red); color: var(--ggda-red); }
.button.outline:hover { background-color: var(--ggda-red); color: var(--ggda-white); }

/* ==========================================================================
   GLOBAL BASE
   ========================================================================== */

body { font-family: var(--ggda-font); color: var(--ggda-text); background-color: var(--ggda-white); }
a       { color: var(--ggda-red); }
a:hover { color: var(--ggda-red-dark); }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

#header { background-color: var(--ggda-dark); }

.nav-dark .nav > li > a,
#header .nav > li > a { color: rgba(255,255,255,.85); }

.nav-dark .nav > li > a:hover,
#header .nav > li > a:hover,
#header .nav > li.current-menu-item > a { color: var(--ggda-white); }

.nav .sub-menu { background-color: var(--ggda-dark-mid); border-top: 3px solid var(--ggda-red); }
.nav .sub-menu li a       { color: rgba(255,255,255,.80); }
.nav .sub-menu li a:hover { color: var(--ggda-white); background-color: rgba(255,255,255,.05); }

.nav-cta-register {
    background-color: var(--ggda-red) !important;
    color: var(--ggda-white) !important;
    border-radius: var(--ggda-radius) !important;
    padding: 6px 16px !important;
}
.nav-cta-register:hover { background-color: var(--ggda-red-dark) !important; }

.nav-cta-login {
    border: 1px solid rgba(255,255,255,.4) !important;
    color: var(--ggda-white) !important;
    border-radius: var(--ggda-radius) !important;
    padding: 6px 16px !important;
}
.nav-cta-login:hover { border-color: var(--ggda-white) !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer { background-color: var(--ggda-dark); border-top: 4px solid var(--ggda-red); color: rgba(255,255,255,.70); }
#footer a       { color: rgba(255,255,255,.70); }
#footer a:hover { color: var(--ggda-white); }

#footer .footer-widgets h4,
#footer .footer-widgets .widget-title {
    color: var(--ggda-white);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.footer-bottom { background-color: rgba(0,0,0,.20); color: rgba(255,255,255,.45); font-size: 13px; }

/* ==========================================================================
   SECTION UTILITIES
   ========================================================================== */

.section-white { background-color: var(--ggda-white); }
.section-light { background-color: var(--ggda-light); }
.section-dark  { background-color: var(--ggda-dark); color: var(--ggda-white); }

.section-title {
    font-family: var(--ggda-font);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 32px);
    color: var(--ggda-dark);
    margin-bottom: 8px;
}
.section-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    background-color: var(--ggda-red);
    margin-top: 10px;
}
.section-dark .section-title { color: var(--ggda-white); }

/* ==========================================================================
   STATS BAR
   ========================================================================== */

.ggda-stats-bar { display: grid; grid-template-columns: repeat(4,1fr); }

.ggda-stat-block { padding: 32px 24px; text-align: center; color: var(--ggda-white); }
.ggda-stat-block--red   { background-color: var(--ggda-red); }
.ggda-stat-block--gold  { background-color: var(--ggda-gold); color: var(--ggda-dark); }
.ggda-stat-block--blue  { background-color: var(--ggda-blue); }
.ggda-stat-block--olive { background-color: var(--ggda-olive); color: var(--ggda-dark); }

.ggda-stat-block__number {
    display: block;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}
.ggda-stat-block__label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ==========================================================================
   ROLE CARDS  (register page + homepage)
   ========================================================================== */

.ggda-role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; }

.ggda-role-card {
    background-color: var(--ggda-white);
    border: 2px solid var(--ggda-border);
    border-radius: var(--ggda-radius-lg);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.ggda-role-card:hover,
.ggda-role-card.is-selected { border-color: var(--ggda-red); box-shadow: 0 0 0 3px var(--ggda-red-light); }

.ggda-role-card__icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
}
.ggda-role-card--exporter .ggda-role-card__icon { background-color: var(--ggda-red-light); color: var(--ggda-red); }
.ggda-role-card--buyer   .ggda-role-card__icon { background-color: #EFF6FF; color: var(--ggda-blue); }
.ggda-role-card--partner .ggda-role-card__icon { background-color: #FFFBEB; color: var(--ggda-gold-dark); }

.ggda-role-card__title { font-size: 18px; font-weight: 700; color: var(--ggda-dark); margin-bottom: 8px; }
.ggda-role-card__desc  { font-size: 14px; color: var(--ggda-text-muted); line-height: 1.5; margin-bottom: 20px; }

.section-dark .ggda-role-card { background-color: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.section-dark .ggda-role-card:hover { border-color: var(--ggda-red); background-color: rgba(255,255,255,.08); }
.section-dark .ggda-role-card__title { color: var(--ggda-white); }
.section-dark .ggda-role-card__desc  { color: rgba(255,255,255,.65); }

/* ==========================================================================
   BUTTONS  (portal UI — not Flatsome buttons)
   ========================================================================== */

.ggda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--ggda-radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--ggda-font);
    cursor: pointer;
    border: 2px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.ggda-btn--primary             { background: var(--ggda-red); color: #fff; border-color: var(--ggda-red); }
.ggda-btn--primary:hover       { background: var(--ggda-red-dark); border-color: var(--ggda-red-dark); color: #fff; }
.ggda-btn--outline             { background: transparent; color: var(--ggda-red); border-color: var(--ggda-red); }
.ggda-btn--outline:hover       { background: var(--ggda-red); color: #fff; }
.ggda-btn--sm                  { padding: 7px 14px; font-size: 13px; }
.ggda-btn--block               { display: flex; width: 100%; box-sizing: border-box; }

/* ==========================================================================
   STATUS BADGES
   ========================================================================== */

.ggda-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ggda-badge--pending  { background: rgba(251,187,23,.15); color: #c89a00; }
.ggda-badge--approved { background: rgba(46,204,113,.12); color: #27ae60; }
.ggda-badge--rejected { background: #FEE2E2; color: #991B1B; }
.ggda-badge--new      { background: var(--ggda-red-light); color: var(--ggda-red-dark); }
.ggda-badge--actioned { background: #E0F2FE; color: #0369A1; }

/* ==========================================================================
   PILL TAGS  (directory cards)
   ========================================================================== */

.ggda-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}

/* Blue — export markets / countries */
.ggda-pill--country {
    background: var(--ggda-blue-light);
    color: var(--ggda-blue-dark);
    border: 1px solid #c5d0ef;
}

/* Red — HS chapter sectors */
.ggda-pill--sector {
    background: var(--ggda-red-light);
    color: var(--ggda-red-dark);
    border: 1px solid #e8bfc4;
}

/* Gold — partner type badge */
.ggda-pill--type {
    background: #FFF8E1;
    color: var(--ggda-gold-dark);
    border: 1px solid #ffe082;
    white-space: nowrap;
    flex-shrink: 0;
}

/* BBBEE badge */
.ggda-pill--bbbee {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Services (partners) */
.ggda-pill--service {
    background: var(--ggda-bg);
    color: var(--ggda-text-muted);
    border: 1px solid var(--ggda-border);
}

/* Overflow count */
.ggda-pill--more {
    background: transparent;
    color: var(--ggda-text-muted);
    border: 1px solid var(--ggda-border);
}

/* ==========================================================================
   ARCHIVE / DIRECTORY PAGES
   ========================================================================== */

.ggda-archive-page { background: var(--ggda-bg); min-height: 60vh; }

.ggda-archive-hero { background: var(--ggda-dark); padding: 48px 0; }
.ggda-archive-hero__inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.ggda-archive-hero__title { color: #fff; font-size: 32px; font-weight: 700; margin: 0 0 8px; }
.ggda-archive-hero__sub   { color: rgba(255,255,255,.6); font-size: 16px; margin: 0; }

.ggda-archive-body { max-width: 1140px; margin: 0 auto; padding: 40px 24px; }
.ggda-archive-count { font-size: 13px; color: var(--ggda-text-muted); margin: 0 0 24px; }

/* Filter bar */
.ggda-filter-bar {
    background: #fff;
    border: 1px solid var(--ggda-border);
    border-radius: var(--ggda-radius-lg);
    padding: 20px 24px;
    margin-bottom: 28px;
    box-shadow: var(--ggda-shadow);
}
.ggda-filter-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }

.ggda-filter-bar__field { flex: 1; min-width: 180px; }
.ggda-filter-bar__field label {
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--ggda-text-muted);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 6px;
}
.ggda-filter-bar__field input,
.ggda-filter-bar__field select {
    width: 100%; box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--ggda-border);
    border-radius: var(--ggda-radius);
    font-size: 14px; font-family: var(--ggda-font);
    background: #fff; color: var(--ggda-text);
    transition: border-color .15s;
}
.ggda-filter-bar__field input:focus,
.ggda-filter-bar__field select:focus {
    outline: none;
    border-color: var(--ggda-red);
    box-shadow: 0 0 0 3px var(--ggda-red-light);
}
.ggda-filter-bar__actions { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }

/* ==========================================================================
   CARD GRID
   ========================================================================== */

.ggda-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: 24px;
    margin-bottom: 40px;
}

/* ==========================================================================
   CARD — v2.17.0 (new design, all legacy rules removed)
   ========================================================================== */

.ggda-card {
    background: #fff;
    border: 1px solid var(--ggda-border);
    border-radius: var(--ggda-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.ggda-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

/* Top zone — 140px fixed height */
.ggda-card__top {
    height: 140px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Logo variant: white background */
.ggda-card__top--has-logo {
    background: #fff;
    border-bottom: 1px solid var(--ggda-border);
    padding: 16px 24px;
}

/* Fallback variant: dark background with company name */
.ggda-card__top--no-logo {
    background: var(--ggda-dark);
    padding: 16px 20px;
}

/* Logo background-image div — bypasses Flatsome's img { height:auto } */
.ggda-card__logo-bg {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Company name text shown when no logo */
.ggda-card__company-fallback {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card body */
.ggda-card__body {
    padding: 16px 16px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Name + badge row */
.ggda-card__header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ggda-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ggda-dark);
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

/* Tag rows (Markets / Sectors / Services) */
.ggda-card__tag-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.ggda-card__tag-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ggda-text-light);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    padding-top: 3px;
    flex-shrink: 0;
}

.ggda-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* CTA button strip */
.ggda-card__cta {
    padding: 0 16px 16px;
    margin-top: auto;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.ggda-pagination { display: flex; justify-content: center; gap: 4px; margin-top: 40px; }
.ggda-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--ggda-radius);
    border: 1px solid var(--ggda-border);
    font-size: 14px; color: var(--ggda-text);
    text-decoration: none; transition: background .15s, color .15s;
}
.ggda-pagination .page-numbers:hover,
.ggda-pagination .page-numbers.current { background: var(--ggda-red); color: #fff; border-color: var(--ggda-red); }
.ggda-pagination .prev,
.ggda-pagination .next { width: auto; padding: 0 14px; }

/* Empty state */
.ggda-empty-state { text-align: center; padding: 80px 20px; color: var(--ggda-text-muted); }
.ggda-empty-state p { font-size: 16px; margin-bottom: 20px; }

/* ==========================================================================
   DASHBOARD — full-width breakout
   ========================================================================== */

.page-template-page-dashboard #wrapper,
.page-template-page-dashboard #main,
.page-template-page-dashboard .container,
.page-template-page-dashboard #content,
.page-template-page-dashboard .page-wrapper,
.page-template-page-dashboard .col.pb-0 {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

.page-template-page-dashboard .ggda-dashboard-wrap { margin: 0 !important; width: 100% !important; }
.page-template-page-dashboard .ggda-dashboard       { width: 100%; max-width: 100%; display: block; }

.page-template-page-dashboard .ggda-dashboard__sidebar {
    position: sticky;
    top: 125px;
    height: calc(100vh - 125px);
    overflow-y: auto;
}

.page-template-page-dashboard .ggda-dashboard__main {
    padding: 32px 40px;
    overflow-y: auto;
    background: var(--ggda-bg);
}

/* Stat row */
.page-template-page-dashboard .ggda-stat-row,
.ggda-dash-content .ggda-stat-row {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

/* Dashboard header card */
.page-template-page-dashboard .ggda-dash-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
    border-radius: var(--ggda-radius-lg) !important;
}

/* Tab nav */
.page-template-page-dashboard .ggda-dash-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    margin-bottom: 24px !important;
    border-bottom: 2px solid var(--ggda-border) !important;
}

/* Action cards */
.page-template-page-dashboard .ggda-action-cards {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 16px !important;
}

/* Field rows in profile forms */
.page-template-page-dashboard .ggda-field-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    /* Dashboard sidebar collapses */
    .page-template-page-dashboard .ggda-dashboard__sidebar {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }
    .page-template-page-dashboard .ggda-dashboard__main {
        padding: 20px 16px !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    .page-template-page-dashboard .ggda-dashboard {
        flex-direction: column !important;
    }
    /* Stat row stacks to 2-col on tablet */
    .page-template-page-dashboard .ggda-stat-row,
    .ggda-dash-content .ggda-stat-row {
        grid-template-columns: repeat(2,1fr) !important;
    }
    /* Action cards 2-col */
    .page-template-page-dashboard .ggda-action-cards {
        grid-template-columns: repeat(2,1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Archive filter */
    .ggda-filter-form        { flex-direction: column; }
    .ggda-filter-bar__field  { min-width: 100%; }

    /* Card grid single column */
    .ggda-card-grid { grid-template-columns: 1fr; }

    /* Card: smaller top zone on mobile */
    .ggda-card__top { height: 110px; }

    /* Archive hero */
    .ggda-archive-hero__title { font-size: 24px; }

    /* Cards: cap pills to fewer on mobile */
    /* (handled in PHP — 3 desktop / 2 mobile — enforced via JS or PHP slice) */

    /* Stats bar */
    .ggda-stats-bar { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 600px) {
    /* Dashboard field rows go single column */
    .page-template-page-dashboard .ggda-field-row {
        grid-template-columns: 1fr !important;
    }
    /* Dashboard stat row single column */
    .page-template-page-dashboard .ggda-stat-row,
    .ggda-dash-content .ggda-stat-row {
        grid-template-columns: 1fr !important;
    }
    /* Action cards single column */
    .page-template-page-dashboard .ggda-action-cards {
        grid-template-columns: 1fr !important;
    }
    /* Dashboard tabs wrap */
    .page-template-page-dashboard .ggda-dash-nav {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .page-template-page-dashboard .ggda-dash-nav a {
        flex: 1 1 auto !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    /* Archive body padding */
    .ggda-archive-body { padding: 24px 16px; }
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.ggda-breadcrumb {
    background: var(--ggda-dark);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 0;
}

.ggda-breadcrumb__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.ggda-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 0;
    transition: color .15s;
    letter-spacing: .01em;
}

.ggda-breadcrumb a::before {
    content: '\2190';
    font-size: 14px;
    line-height: 1;
}

.ggda-breadcrumb a:hover {
    color: rgba(255,255,255,.9);
}