/**
 * Global Theme Styles
 * Shared variables, base styles, and utilities for Pegasus Leisure Group theme
 * Import this file in other CSS files using: @import url('../css/global.css');
 */

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: 'Shelby';
    src: url('../fonts/ShelbyRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Delta Jaeger';
    src: url('../fonts/Delta Jaeger Light Regular.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../fonts/brandon-grotesque-light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque Regular';
    src: url('../fonts/brandon-grotesque-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque Black';
    src: url('../fonts/brandon-grotesque-black.otf') format('opentype');
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colors - Primary Palette (Theme Colors) */
    --color-black: #000000;
    --color-dark-grey: #1a1a1a;
    --color-white-bg: #ffffff;
    --color-gold: #c6b783;
    --color-gold-alt: #c6b783;
    --color-light-gold: #f5e6d3;
    --color-purple: #6b46c1;
    --color-grey: #71828A;
    --color-gold-cart: #F7F4EC;
    --color-light-blue: #d2e6f7;
    --color-dark-blue: #25408f;
    --color-contrast-red: #7e1236;
    --color-contrast-light-orange: #f8aa9a;
    --color-fade-white: #ffffff14;



    /* Colors - Text (using theme colors) */
    --color-text-dark: #1A1717;
    --color-text-light: #717171;
    --color-text-muted: #979797;
    --color-white: #ffffff;
    --color-form-text: #3F3F3F;
    --color-dark-blue-fade: rgb(39 60 147) !important;

    /* Colors - Semantic */
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* Tiers */
    --color-tier-silver: #a6acb3;
    --color-tier-gold: #c6b783;
    --color-tier-platinum: #25408f;
    --color-tier-crystal: #231f20;

    /* Borders */
    --color-border: #e5e7eb;
    --color-border-dark: #d1d5db;
    --color-border-light: #EAEAEA;

    /* Backgrounds */
    --color-bg-off-white: #F8F5F2;
    --color-bg-dark: #111827;
    --color-bg-darker: #0a1126;
    --color-bg-light: #f9f9f9;

    /* Typography */
    --font-primary: 'Open Sans', sans-serif;
    /* --font-primary: 'Brandon Grotesque Regular', sans-serif; */
    /* --font-primary: 'Delta Jaeger', sans-serif; */

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-4xl: 2.25rem;
    /* 36px */
    --font-size-5xl: 3rem;
    /* 48px */
    --font-size-6xl: 3.75rem;
    /* 60px */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-900: 900;
    /* Spacing */
    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */
    --spacing-3xl: 4rem;
    /* 64px */

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Border Radius */
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-full: 9999px;
    --border-radius-14: 14px;


    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.02);
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Container */
    --container-max-width: 1200px;
    --container-padding: 1.5rem;
    /* 24px */

    /* Z-Index Layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Opacity Colors */
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-52: rgba(255, 255, 255, 0.52);
    --color-overlay: rgba(0, 0, 0, 0.8);
    --color-overlay-50: rgba(0, 0, 0, 0.5);
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-05: rgba(0, 0, 0, 0.05);
    --color-gold-alpha-10: rgba(197, 179, 130, 0.1);
    --color-gold-alpha-30: rgba(197, 179, 130, 0.3);
    --color-gold-alpha-20: rgba(197, 179, 130, 0.2);
    --color-gold-alpha-19: rgba(197, 182, 131, 0.40);

    /* Specific Backgrounds */
    --color-bg-gradient-start: #F5F2E9;
    --color-bg-gradient-end: #E8E2D2;
    --color-bg-cream: #F9F8F2;
    --color-bg-cream-light: #FBFAF5;
    --color-bg-cream-dark: #F4F0E4;

    /* Missing or Alias Colors */
    --color-light-bg: #f9f9f9;
    --color-bg-dark-charcoal: #262323;
    --color-dark-charcoal: #262323;
    --color-bg-lighter: #fafafa;
    --color-gold-alpha-25: rgba(197, 182, 131, 0.25);

    /* Gold Variations */
    --color-gold-light: #CDBE92;
    --color-gold-dark: #b09f6e;
    --color-gold-darker: #A69666;

    /* Text Colors */
    --color-text-gray-600: #6B7280;

    /* Shadows */
    --shadow-card-elevated: 0px 3px 6px rgba(0, 0, 0, 0.16);
    --shadow-button: 0px 5px 5px rgba(151, 151, 151, 0.23);
    --shadow-footer: 0 -1px 5px rgba(0, 0, 0, 0.05);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-settings-menu: 0 4px 15px rgba(0, 0, 0, 0.02);
    --shadow-logout-btn: 0 4px 10px rgba(0, 0, 0, 0.2);
    --shadow-error-focus: 0 0 0 2px rgba(220, 53, 69, 0.15);

    /* Gradients */
    --gradient-pegasus: transparent linear-gradient(180deg, #E9E6DB -5%, #FFF4EC8E 3%, #FFFFFF85 19%) 0% 0% no-repeat padding-box;

    /* Grays */
    --color-gray-300: #E0E0E0;
}

/* ============================================
   Reset & Base Styles
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-dark);
    background-color: var(--color-light-bg);
}

/* ============================================
   Button Base Styles
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    min-height: 54px;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius-14);
    transition: all var(--transition-base);
    min-width: 150px;
}

@media screen and (min-width: 1400px) {
    .btn {
        min-width: 200px;
        font-size: 14px;
    }
}

.btn:hover {
    box-shadow: var(--shadow-button);
    color: var(--color-white);
    background-color: var(--color-black);
}

.mp-back-to-login {
    color: var(--color-text-dark);
}

/* Theme Gold Button */
.btn-theme-gold {
    background-color: var(--color-gold);
    color: var(--color-black);
    border-color: var(--color-gold);
    border-radius: var(--border-radius-14);
}

.btn-theme-gold:hover:not(:disabled) {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

/* Theme Black Button */
.btn-theme-dark-blue {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    border-radius: var(--border-radius-14);
    background-color: var(--color-dark-blue);
    box-shadow: var(--shadow-button);
}

.btn-theme-dark-blue:hover:not(:disabled) {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

.btn-theme-black {
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--border-radius-14);
    border-color: var(--color-black);
    box-shadow: var(--shadow-button);
}

.btn-theme-black:hover:not(:disabled) {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

/* Theme Outline Button */
.btn-outline-theme {
    background-color: transparent;
    color: var(--color-black);
    border-color: var(--color-black);
    border-radius: var(--border-radius-14);
}

.btn-outline-theme:hover:not(:disabled) {
    background-color: var(--color-black);
    color: var(--color-white);
    box-shadow: 0px 10px 10px rgba(151, 151, 151, 0.23);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Standard Button Classes */
.btn-primary {
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--border-radius-14);
    border-color: var(--color-black);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--border-radius-14);
    border-color: var(--color-black);
}

.btn-secondary {
    background-color: var(--color-gold);
    color: var(--color-black);
    border-color: var(--color-gold);
    border-radius: var(--border-radius-14);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

/* Modal Styling */
.mp-theme-modal .modal-content {
    background-color: var(--color-bg-cream-light);
    border: 1px solid var(--color-gold-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.mp-theme-modal .modal-header {
    border-bottom: 1px solid var(--color-gold-alpha-20);
    padding: var(--spacing-md) var(--spacing-lg);
}

.mp-theme-modal .modal-title {
    color: var(--color-black);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
}

.mp-theme-modal .modal-body {
    padding: var(--spacing-lg);
    color: var(--color-text-dark);
}

.mp-theme-modal .modal-footer {
    border-top: 1px solid var(--color-gold-alpha-20);
    padding: var(--spacing-md) var(--spacing-lg);
}

.mp-theme-modal .btn-close {
    opacity: 0.5;
}

.mp-theme-modal .btn-close:hover {
    opacity: 1;
}

/* Primary Button in Modal (Gold) */
.mp-theme-modal .btn-primary {
    background-color: var(--color-black);
    color: var(--color-gold);
    border: 1px solid var(--color-black);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
}

.mp-theme-modal .btn-primary:hover {
    background-color: var(--color-dark-grey);
    border-color: var(--color-dark-grey);
    transform: translateY(-1px);
}

/* Secondary Button in Modal (Outline) */
.mp-theme-modal .btn-secondary {
    background-color: transparent;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
}

.mp-theme-modal .btn-secondary:hover {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    border-color: var(--color-border-dark);
}

/* Feedback Form Styles */
.form-select-type {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M8 11L3 6h10z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}

.mp-custom-venue-wrapper.select-wrapper::after {
    display: none;
}

.mp-custom-venue-wrapper.form-floating>label.custom-floating-label {
    padding: 0;
    height: auto;
}

#mp-feedback-form .form-control:focus,
#mp-feedback-form .form-select:focus,
#mp-feedback-form .custom-textarea:focus {
    border-color: var(--color-gold);
    box-shadow: none;
}

/* Fix floating labels for selects in feedback form */
#mp-feedback-form .form-floating>.form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

#mp-feedback-form .form-floating>.form-select~label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

#mp-feedback-form .mp-file-input {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-14);
    padding: 0.55rem 0.75rem;
    background-color: var(--color-white-bg);
}

#mp-feedback-form .mp-file-input .feedback-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#mp-feedback-form .mp-file-input .mp-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-md);
    padding: 0.6rem 1rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    margin: 0;
}

#mp-feedback-form .mp-file-input .mp-file-btn:hover {
    background-color: var(--color-black);
}

#mp-feedback-form .mp-file-input .mp-file-name {
    color: var(--color-text-dark);
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Checkout Coupon Styling */
.checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--color-white-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
}

.checkout_coupon .form-row {
    margin-bottom: 0;
    flex-grow: 1;
}

.checkout_coupon .form-row-first {
    flex-grow: 1;
}

.checkout_coupon .form-row-last {
    width: auto;
}

.checkout_coupon .input-text {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.checkout_coupon button {
    height: 100%;
    background-color: var(--color-black);
    color: var(--color-gold);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s;
}

.checkout_coupon button:hover {
    background-color: var(--color-dark-grey);
}


/* ============================================
   woocommerce Classes
   ============================================ */

.woocommerce-message {
    max-width: 100%;
    width: unset;
    border-top-color: var(--color-dark-blue);
    /* margin: -2em auto 2em; */
    padding: 1em 2em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.woocommerce-message:focus-visible {
    outline: unset;
}

.woocommerce-message::before {
    position: static;
    margin-right: 15px;
    order: 0;
    transform: none;
    line-height: 1;
}

.woocommerce-message a.restore-item,
.woocommerce-page .woocommerce-message .button {
    font-size: 14px;
    color: var(--color-white);
    background-color: var(--color-dark-blue);
    border-radius: 6px;
    padding: 8px 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-left: auto;
}

.woocommerce-message a.restore-item:hover,
.woocommerce-page .woocommerce-message .button:hover {
    background-color: var(--color-dark-grey);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 1000px) {
    .woocommerce-message {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .woocommerce-message {
        font-size: 14px;
    }

    .woocommerce-page .woocommerce-message .button {
        font-size: 12px;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

header.profile-header-hide {
    display: none !important;
}

.mp-icon-20 {
    font-size: 20px;
}

.mp-notification-tabs {
    font-size: 0.9rem;
}

.mp-notification-divider {
    margin-inline: 16px;
}

.line-height-normal {
    line-height: normal
}

.wpml-ls-statics-footer.wpml-ls.wpml-ls-legacy-list-horizontal {
    display: none !important;
}

.generate-google-save {
    word-break: break-all;
}

.bg-light-blue {
    background-color: var(--color-light-blue) !important;
}

.bg-dark-blue {
    background-color: var(--color-dark-blue) !important;
}


/* Custom Venue Dropdown (Shared) */
.mp-custom-venue-wrapper {
    position: relative;
}

.mp-custom-venue-trigger {
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    cursor: pointer;
    background-color: var(--color-white);
    position: relative;
}

.mp-custom-venue-trigger .selected-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: unset;
    cursor: pointer;
    width: 95%;
}

.mp-custom-venue-trigger::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-text-dark);
}

.mp-custom-venue-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-white);
    border-radius: 0px 0px 12px 12px;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.mp-custom-venue-dropdown .dropdown-message {
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--color-text-gray-600);
}

.mp-custom-venue-dropdown.mp-hidden {
    display: none;
}

.mp-custom-venue-dropdown .mp-venue-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.2s;
}

.mp-custom-venue-dropdown .mp-venue-option:last-child {
    border-bottom: none;
}

.mp-custom-venue-dropdown .mp-venue-option:hover {
    background-color: var(--color-bg-cream);
}

.mp-custom-venue-dropdown .mp-venue-option-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    border: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.mp-custom-venue-dropdown .mp-venue-option-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow: hidden;
    gap: 5px;
}

.mp-custom-venue-dropdown .mp-venue-option-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
}

.mp-custom-venue-dropdown .mp-venue-option-address {
    font-size: 11px;
    color: var(--color-text-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-custom-venue-wrapper {
    position: relative;
    padding-top: 1.25rem;
}

.mp-custom-venue-wrapper .custom-floating-label {
    position: absolute;
    top: 0;
    left: 16px;
    font-size: 0.85rem;
    opacity: 0.65;
    transform: translateY(5px);
    pointer-events: none;
    color: var(--color-text-dark);
}

#mp-feedback-form .mp-custom-venue-trigger {
    height: 56px;
    padding-top: 1.25rem;
}

/* Fix hover invisibility and background for text-muted buttons */
.btn.text-muted:hover,
button.text-muted:hover {
    color: #6c757d !important;
    background-color: transparent !important;
    box-shadow: none !important;
}