/**
 * Geo Currency Switcher - Public/Frontend Styles
 */

/* ========================================
   CSS VARIABLES (Root)
   ======================================== */
:root {
    /* Brand palette — mirrors rcd-dashboard/assets/css/global.css and the
       Raabta theme's style.css so the switcher is 100% on-brand. Names are
       kept (--gcs-*) so the rest of this file needs no changes. */
    --gcs-color-primary: #243A7D;      /* --brand-1 navy */
    --gcs-color-info: #1C88C9;         /* --brand-2 sky blue */
    --gcs-color-accent: #E5B921;       /* --brand-3 gold */
    --gcs-color-secondary: #000000;
    --gcs-color-1: var(--gcs-color-info);     /* interactive / focus / active */
    --gcs-color-2: var(--gcs-color-primary);
    --gcs-white: #FFFFFF;
    --gcs-text-color: #000000;
    --gcs-text-clr-grey: #6c757d;      /* --neutral-grey */
    --gcs-secondary-white: #f4f6f9;    /* --neutral-muted */
    --gcs-border-color: #e9ecef;       /* --neutral-border */
    --gcs-imperial-red: #e63946;       /* --status-danger */
    --gcs-light-black: #000000;
    --gcs-yellow: var(--gcs-color-accent);
    --gcs-lite-imperial-red: #ffdddd;
    --gcs-transparent: transparent;
    --gcs-gradient-primary: linear-gradient(135deg, var(--gcs-color-primary) 0%, var(--gcs-color-info) 100%);
    --gcs-text-clr-lite-white: #FEFEFE;
    --gcs-box-bg: #f4f6f9;
    --gcs-focus-ring: rgba(28, 136, 201, 0.2);

    /* Typography (same scale as the dashboard) */
    --gcs-font-family: 'Google Sans', 'Google Sans Text', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --gcs-main-heading-font-size: 28px;
    --gcs-sub-heading-font-size: 20px;
    --gcs-small-heading-font-size: 16px;
    --gcs-main-content: 15px;
    --gcs-medium-main-content: 15px;
    --gcs-small-main-content: 13px;
    --gcs-mini-main-content: 12px;
    --gcs-heading-line-height: 1.3;
    --gcs-content-line-height: 1.6;
    --gcs-mini-line-height: 1.2;
    --gcs-heading-font-weight: 700;
    --gcs-medium-font-weight: 500;
    --gcs-small-font-weight: 400;

    /* Spacing & Borders */
    --gcs-border-radius-standard: 8px;
    --gcs-border-radius-medium: 16px;
    --gcs-border-radius-large: 30px;
    --gcs-padding-standard: 20px;
    --gcs-padding-medium: 30px;

    /* Shadows */
    --gcs-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    --gcs-box-shadow-hover: 0 6px 25px rgba(0, 0, 0, 0.16);
}

/* Loading overlay during currency switch */
body.gcs-switching::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 99999;
}

body.gcs-switching::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--gcs-secondary-white);
    border-top: 3px solid var(--gcs-color-1);
    border-radius: 50%;
    animation: gcs-spin 0.8s linear infinite;
    z-index: 100000;
}

@keyframes gcs-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loader Overlay */
.gcs-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gcs-loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--gcs-secondary-white);
    border-top: 4px solid var(--gcs-color-1);
    border-radius: 50%;
    animation: gcs-spin 0.8s linear infinite;
}

/* Base Switcher */
.gcs-switcher {
    position: relative;
    display: inline-block;
    font-family: var(--gcs-font-family);
}

/* Dropdown Style */
.gcs-style-dropdown {
    position: relative;
}

.gcs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--gcs-transparent);
    border: 1px solid var(--gcs-border-color);
    border-radius: var(--gcs-border-radius-large);
    color: var(--gcs-text-color);
    font-size: var(--gcs-small-main-content);
    font-weight: var(--gcs-medium-font-weight);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: var(--gcs-font-family);
}

.gcs-toggle:hover {
    background: var(--gcs-secondary-white);
    border-color: var(--gcs-color-1);
}

.gcs-arrow {
    display: flex;
    transition: transform 0.3s ease;
}

.gcs-style-dropdown.active .gcs-arrow {
    transform: rotate(180deg);
}

.gcs-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--gcs-white);
    border-radius: var(--gcs-border-radius-standard);
    box-shadow: var(--gcs-box-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.gcs-style-dropdown.active .gcs-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gcs-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--gcs-light-black);
    font-size: var(--gcs-small-main-content);
    font-family: var(--gcs-font-family);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gcs-option:hover {
    background: var(--gcs-secondary-white);
}

.gcs-option.active {
    background: var(--gcs-gradient-primary);
    color: var(--gcs-white);
}

.gcs-option .gcs-code {
    font-weight: var(--gcs-heading-font-weight);
    min-width: 35px;
}

.gcs-option .gcs-name {
    flex: 1;
    color: var(--gcs-text-clr-grey);
    font-size: var(--gcs-mini-main-content);
}

.gcs-option.active .gcs-name {
    color: var(--gcs-text-clr-lite-white);
}

.gcs-option .gcs-symbol {
    color: var(--gcs-text-clr-grey);
    font-size: var(--gcs-mini-main-content);
}

.gcs-option.active .gcs-symbol {
    color: var(--gcs-text-clr-lite-white);
}

/* Buttons Style */
.gcs-style-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gcs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--gcs-transparent);
    border: 1px solid var(--gcs-border-color);
    border-radius: var(--gcs-border-radius-large);
    color: var(--gcs-text-color);
    font-size: var(--gcs-small-main-content);
    font-weight: var(--gcs-medium-font-weight);
    font-family: var(--gcs-font-family);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gcs-btn:hover {
    border-color: var(--gcs-color-1);
    color: var(--gcs-color-1);
}

.gcs-btn.active {
    background: var(--gcs-gradient-primary);
    border-color: var(--gcs-color-1);
    color: var(--gcs-white);
}

/* Select Style */
.gcs-style-select {
    display: inline-block;
}

.gcs-select {
    padding: 8px 35px 8px 12px;
    background: var(--gcs-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23909AAD' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--gcs-border-color);
    border-radius: var(--gcs-border-radius-standard);
    font-size: var(--gcs-small-main-content);
    font-family: var(--gcs-font-family);
    color: var(--gcs-text-color);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.gcs-select:hover {
    border-color: var(--gcs-color-1);
}

.gcs-select:focus {
    outline: none;
    border-color: var(--gcs-color-1);
    box-shadow: 0 0 0 2px var(--gcs-focus-ring);
}

/* Inline Style */
.gcs-style-inline {
    display: inline;
}

.gcs-link {
    color: inherit;
    text-decoration: none;
    font-weight: var(--gcs-medium-font-weight);
    font-family: var(--gcs-font-family);
    transition: color 0.2s ease;
}

.gcs-link:hover {
    color: var(--gcs-color-1);
}

.gcs-link.active {
    color: var(--gcs-color-1);
    font-weight: var(--gcs-heading-font-weight);
}

/* Currency Flags (real images, see GCS_Shortcodes::flag) */
.gcs-flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Price Display */
.gcs-price {
    display: inline;
    font-weight: inherit;
    font-family: var(--gcs-font-family);
    transition: opacity 0.2s ease;
}

.gcs-price.loading {
    opacity: 0.5;
}

/* Dark Theme Support */
.dark-theme .gcs-dropdown-menu,
[data-theme="dark"] .gcs-dropdown-menu {
    background: var(--gcs-light-black);
    border: 1px solid var(--gcs-text-clr-grey);
}

.dark-theme .gcs-option,
[data-theme="dark"] .gcs-option {
    color: var(--gcs-white);
}

.dark-theme .gcs-option:hover,
[data-theme="dark"] .gcs-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dark-theme .gcs-option.active,
[data-theme="dark"] .gcs-option.active {
    background: var(--gcs-gradient-primary);
    color: var(--gcs-white);
}

/* RTL Support */
[dir="rtl"] .gcs-dropdown-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .gcs-select {
    padding: 8px 12px 8px 35px;
    background-position: left 12px center;
}

/* Header Integration */
.main-header-wrapper .gcs-switcher {
    margin-left: 15px;
}

.main-header-wrapper .gcs-toggle {
    color: var(--gcs-white);
    border-color: rgba(255, 255, 255, 0.5);
}

.main-header-wrapper .gcs-toggle:hover {
    border-color: var(--gcs-white);
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .gcs-toggle {
        padding: 6px 12px;
        font-size: var(--gcs-mini-main-content);
    }
    
    .gcs-dropdown-menu {
        min-width: 160px;
    }
    
    .gcs-option {
        padding: 10px 14px;
        font-size: var(--gcs-mini-main-content);
    }
    
    .gcs-btn {
        padding: 6px 12px;
        font-size: var(--gcs-mini-main-content);
    }
}

/* ========================================
   STICKY WIDGET
   ======================================== */

.gcs-sticky-widget {
    position: fixed !important;
    bottom: var(--gcs-padding-standard) !important;
    z-index: 99998 !important;
    font-family: var(--gcs-font-family) !important;
}

/* Right position (default) */
.gcs-sticky-widget.gcs-sticky-right {
    right: var(--gcs-padding-standard) !important;
    left: auto !important;
}

.gcs-sticky-right .gcs-sticky-dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

/* Left position */
.gcs-sticky-widget.gcs-sticky-left {
    left: var(--gcs-padding-standard) !important;
    right: auto !important;
}

.gcs-sticky-left .gcs-sticky-dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

.gcs-sticky-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    background: var(--gcs-white) !important;
    border: none !important;
    border-radius: var(--gcs-border-radius-large) !important;
    box-shadow: var(--gcs-box-shadow) !important;
    color: var(--gcs-light-black) !important;
    font-size: var(--gcs-small-main-content) !important;
    font-weight: var(--gcs-heading-font-weight) !important;
    font-family: var(--gcs-font-family) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.gcs-sticky-toggle:hover {
    box-shadow: var(--gcs-box-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

.gcs-sticky-toggle .gcs-flag {
    width: 20px !important;
    height: 15px !important;
    border-radius: 2px !important;
}

.gcs-sticky-toggle .gcs-symbol {
    color: var(--gcs-text-clr-grey) !important;
    font-weight: var(--gcs-small-font-weight) !important;
}

.gcs-sticky-arrow {
    display: flex !important;
    transition: transform 0.3s ease !important;
    margin-left: 4px !important;
}

.gcs-sticky-widget.active .gcs-sticky-arrow {
    transform: rotate(180deg) !important;
}

.gcs-sticky-dropdown-menu {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    min-width: 220px !important;
    background: var(--gcs-white) !important;
    border-radius: var(--gcs-border-radius-medium) !important;
    box-shadow: var(--gcs-box-shadow-hover) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

.gcs-sticky-widget.active .gcs-sticky-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.gcs-sticky-dropdown-menu .gcs-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 18px !important;
    background: none !important;
    border: none !important;
    color: var(--gcs-light-black) !important;
    font-size: var(--gcs-small-main-content) !important;
    font-family: var(--gcs-font-family) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.gcs-sticky-dropdown-menu .gcs-option:hover {
    background: var(--gcs-secondary-white) !important;
}

.gcs-sticky-dropdown-menu .gcs-option.active {
    background: var(--gcs-gradient-primary) !important;
    color: var(--gcs-white) !important;
}

.gcs-sticky-dropdown-menu .gcs-option .gcs-flag {
    width: 22px !important;
    height: 16px !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

.gcs-sticky-dropdown-menu .gcs-option .gcs-code {
    font-weight: var(--gcs-heading-font-weight) !important;
    min-width: 40px !important;
}

.gcs-sticky-dropdown-menu .gcs-option .gcs-name {
    flex: 1 !important;
    color: var(--gcs-text-clr-grey) !important;
    font-size: var(--gcs-mini-main-content) !important;
}

.gcs-sticky-dropdown-menu .gcs-option.active .gcs-name {
    color: var(--gcs-text-clr-lite-white) !important;
}

.gcs-sticky-dropdown-menu .gcs-option .gcs-symbol {
    color: var(--gcs-text-clr-grey) !important;
    font-size: var(--gcs-mini-main-content) !important;
}

.gcs-sticky-dropdown-menu .gcs-option.active .gcs-symbol {
    color: var(--gcs-text-clr-lite-white) !important;
}

/* Sticky Widget Responsive */
@media (max-width: 768px) {
    .gcs-sticky-widget {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .gcs-sticky-toggle {
        padding: 10px 14px !important;
        font-size: var(--gcs-mini-main-content) !important;
    }
    
    .gcs-sticky-dropdown-menu {
        min-width: 200px !important;
        max-height: 250px !important;
    }
    
    .gcs-sticky-dropdown-menu .gcs-option {
        padding: 12px 14px !important;
    }
}