/* This is Brand CSS */
/* The Ables V1.0 */

@font-face {
  font-family: 'Kalev Georgian';
  src: url('./kalev-georgian-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

/* Global & Responsive Approach */
:root {
    /* Brand Colors */
    --brand-color: #E4572E;
    --brand-color-dark: #C14825;
    --brand-color-light: #EE8162;
    --brand-secondary-color: #2EE458;
    --brand-secondary-color-dark: #096d21;
    --brand-secondary-color-light:#7ef99b;
    --brand-background-color: #1a0c02;
    --brand-text-color: #E7E5DD;
    --brand-heading-text-color: #E7E5DD;
    --brand-link-text-color: var(--brand-color);
     
    /* Brand Button Colors */
     --brand-button-bg: var(--brand-color);
     --brand-button-hover-bg: var(--brand-color-dark);
     --brand-button-text-color: #E7E5DD;
     --brand-button-secondary-bg: transparent;
     --brand-button-secondary-border: var(--brand-color);
     --brand-button-secondary-text: var(--brand-color);
     --brand-button-secondary-hover-bg: var(--brand-color-light); 
    
    /* Feedback State Colors */
    --brand-error-color: #E53935;
    --brand-error-color-light: #FFCDD2;
    --brand-error-color-dark: #B71C1C;
  
    --brand-success-color: #2EE458;
    --brand-success-color-light: #A4F2B7;
    --brand-success-color-dark: #1F9B3C;
  
    --brand-warning-color: #FFA000;
    --brand-warning-color-light: #FFECB3;
    --brand-warning-color-dark: #F57C00;
  
    --brand-info-color: #02d109;
    --brand-info-color-light: #B3E5FC;
    --brand-info-color-dark: #019b01;   
  
    /* Form Fields */
    --brand-input-border-color: #d7d7d7;
    --brand-input-focus-border-color: #898989;
    --brand-input-placeholder-color: #777777;
    --brand-input-text-color: var(--brand-text-color);
    --brand-form-icon-color: #999999;
  
    /* Optional */
    --brand-disabled-bg: #F0F0F0;
    --brand-disabled-text: #B0B0B0;
    --brand-highlight-color: #FFFDE7;
    --brand-overlay-color: rgba(0, 0, 0, 0.6);
  
    --brand-promocode-background-color: #353535;
    --brand-promocode-text-color: #dcdcdc;
    --brand-promocode-copy-button-color: #717171;
    --brand-promocode-copy-button-hover-color: #C7C7C7;
    --brand-promocode-copy-icon-color: #343434;
    --brand-promocode-copy-icon-hover-color: #444444;
  
    /* Typography for Content */
    --brand-font-heading: 'Kalev Georgian', sans-serif;
    --brand-font-body: 'Kalev Georgian', sans-serif;
}
  
/* Desktop & Everything Else */
:root {
  /* Font Sizes */
  --brand-font-size-h1: 32px;
  --brand-font-size-h2: 28px;
  --brand-font-size-h3: 24px;
  --brand-font-size-h4: 20px;
  --brand-font-size-paragraph: 18px;
  --brand-font-size-small: 16px;
  --brand-font-icon-size-large: 64px;

  /* Spacing & Feel */
  --brand-border-radius: 8px;
  --brand-vertical-spacing: 24px;
  --brand-vertical-small-spacing: 20px;
  --brand-vertical-xsmall-spacing: 12px;
  --brand-vertical-xxsmall-spacing: 4px;
  --brand-horizontal-spacing: 32px;
  --brand-horizontal-small-spacing: 16px;
  --brand-horizontal-xsmall-spacing: 12px;
}

/* Tablet Design */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    /* Font Sizes */
    --brand-font-size-h1: 28px;
    --brand-font-size-h2: 24px;
    --brand-font-size-h3: 20px;
    --brand-font-size-h4: 18px;
    --brand-font-size-paragraph: 16px;
    --brand-font-size-small: 14px;
    --brand-font-icon-size-large: 60px;
  
    /* Spacing & Feel */
    --brand-border-radius: 8px;
    --brand-vertical-spacing: 20px;
    --brand-vertical-small-spacing: 18px;
    --brand-vertical-xsmall-spacing: 12px;
    --brand-vertical-xxsmall-spacing: 4px;
    --brand-horizontal-spacing: 24px;
    --brand-horizontal-small-spacing: 14px;
    --brand-horizontal-xsmall-spacing: 10px;
  }
}

/* Mobile Design */
@media (max-width: 767px) {
  :root {
    /* Font Sizes */
    --brand-font-size-h1: 24px;
    --brand-font-size-h2: 20px;
    --brand-font-size-h3: 18px;
    --brand-font-size-h4: 16px;
    --brand-font-size-paragraph: 16px;
    --brand-font-size-small: 14px;
    --brand-font-icon-size-large: 56px;

    /* Spacing & Feel */
    --brand-border-radius: 8px;
    --brand-vertical-spacing: 16px;
    --brand-vertical-small-spacing: 14px;
    --brand-vertical-xsmall-spacing: 12px;
    --brand-vertical-xxsmall-spacing: 4px;
    --brand-horizontal-spacing: 20px;
    --brand-horizontal-small-spacing: 12px;
    --brand-horizontal-xsmall-spacing: 8px;

    /* Mobile Only Styling */
    --brand-side-margin: 24px;
  }
}

/* Custom Event Badge Styling */
.event-description {
    background-color: rgba(126, 249, 155, 0.1) !important;
    border: 1px solid var(--brand-secondary-color-light) !important;
    border-radius: 50px !important;
    padding: 6px 16px !important;
}

.event-text {
    color: var(--brand-secondary-color-light) !important;
}

.event-text .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 16 !important;
    font-size: 14px !important;
    color: var(--brand-secondary-color-light) !important;
    border-radius: 50%;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(126, 249, 155, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(126, 249, 155, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(126, 249, 155, 0);
  }
}