@import url('https://fonts.googleapis.com/css2?family=Radikal+Display:wght@700&display=swap');


@font-face {
    font-family: 'Radikal Bold';
    src: url('https://www.hotelgolfmarvimeiro.pt/golfemar_hotel_css/nootype-radikal-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Radikal';
    src: url('https://www.hotelgolfmarvimeiro.pt/golfemar_hotel_css/nootype-radikal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Radikal Thin';
    src: url('https://www.hotelgolfmarvimeiro.pt/golfemar_hotel_css/nootype-radikal-thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


:root {

  /* MAIN COLORS */
  --color-light: #ffffff;
  --color-dark: #232323;
  --color-medium: #00AACC;
  --color-medium-light: color-mix(in srgb, white 80%, var(--color-medium));
  --color-brand: #002855;
  --color-brand-darken: color-mix(in srgb,
      var(--color-dark) 50%,
      var(--color-brand));
  --color-brand-lighten: #00AACC;
  --color-secondary: #00AACC;
  --color-border: var(--color-brand);
  --color-success: #6fc23f;
  --color-warning: #ffeaac;
  --color-error: #fda0a0;
  --color-dark-error: #d34645;

  /* BORDER RADIUS */
  --border-radius-sm: 0.7rem;
  --border-radius-md: 1rem;
  --border-radius-lg: 1.25rem;


  /* USE SHADOWS 0 - False  /  1 - True */
  --custom-card-shadow: 0;  
  --color-shadow: transparent;

  /* FONTS */
  --font-primary: 'Radikal', Lato, sans-serif;
  --font-secondary: 'Radikal Thin', Lato, sans-serif;

  /* MAIN TEXT COLORS */
  --color-title: var(--color-brand);
  --color-small-titles: #838383;
  --color-text: var(--color-title);

  /* MAIN BG */
  --color-bg-main: #f9f9f9;   
  /* HEADER */
  --color-bg-header: var(--color-light);
  /* FOOTER */  
  --color-bg-footer: var(--color-light);

  /*  --  HEADER SETUP  -- */ 
   /* HEADER ICONS */
    --color-header-icons: var(--color-brand);
    --color-nav-icons-border: var(--color-brand);
    --color-nav-icons-bg: transparent;
    --border-nav-icons: 1px;
    --color-nav-icons-border-hover: var(--color-light);
    --color-nav-icons-bg-hover: var(--color-brand);


  /* BURGUER MENU */  

    --color-burger-bg: transparent;
    --color-burger-bg-hover: transparent;
    --color-burger-border: transparent;
    --color-burger-border-hover: transparent;
    --color-burger: var(--color-brand);/* color of the burguer lines */
    --color-burger-hover: var(--color-dark); 
    --border-burger: 2px; /* lines thickness */  
    --spacer-burger: 3px; /* space between lines */


  /* CARDS SETUP */
  /* SELECTOR CARD */
  --color-card-title: var(--color-brand-darken);
  --color-card-title-hover: var(--color-dark);
  --font-card-title: var(--font-primary);

  --color-card-sub-title: var(--color-brand);
  --color-card-sub-title-hover: var(--color-brand-darken);
  --font-card-sub-title: var(--font-secondary);

  --color-bg-card: var(--color-light);
  --color-bg-card-hover: var(--color-brand-lighten);
  --color-border-card: var(--color-brand);
  --color-border-card-hover: var(--color-brand);

  --border-card: 1px;
  --border-radius-card: var(--border-radius-sm);

  /* arrows */
  --color-card-arrow: var(--color-brand);
  --color-card-arrow-hover: var(--color-brand-lighten);
  --color-card-bg-arrow: transparent;
  --color-card-bg-arrow-hover: var(--color-brand);

  --border-radius-arrow: var(--border-radius-md);
  

  /* MAIN */
  --color-bg-card-main: var(--color-light);
  --color-bg-card-main-hover: var(--color-brand-lighten);
  --color-border-card-main: var(--color-brand);
  --color-border-card-main-hover: var(--color-brand);
  --border-card-main: 1px; 


  /* SECONDARY */
  --color-bg-card-secondary: var(--color-light);
  --color-border-card-secondary: var(--color-brand);
  --color-card-text: var(--color-dark);
  --font-card-text: var(--font-primary);
  --border-card-secondary: 1px;

  
  /* CALENDAR */
  --color-cal-arrows: var(--color-brand);
  --font-cal: var(--font-primary);
  --font-cal-prices: var(--font-secondary);
  --color-cal-select: var(--color-brand);
  --color-cal-select-text: var(--color-light);
  --color-cal-select-betwn: color-mix(
    in srgb,
    var(--color-light) 30%,
    var(--color-cal-select)
  );
  --color-cal-select-betwn-text: var(--color-light);
  --color-cal-select-betwn-prices-text: var(--color-light);
  --color-cal-bg: var(--color-light);
  --border-cal-days: none;
  --color-border-cal-days: none;


/* --- BUTTONS --- */

  /* MAIN BUTTON  */  
  --color-btn: var(--color-brand);
  --color-btn-border: var(--color-brand);
  --color-text-btn: var(--color-light);
  --color-btn-hover: var(--color-dark);
  --color-btn-border-hover: var(--color-dark);
  --color-text-btn-hover: var(--color-brand-lighten);

  /* BACK BUTTON */
  --color-text-btn-back: var(--color-brand);
  --color-border-btn-back: var(--color-brand);
  --color-bg-btn-back: var(--color-brand-lighten);
  --color-text-btn-back-hover: var(--color-light);
  --color-border-btn-back-hover: var(--color-brand);
  --color-bg-btn-back-hover: var(--color-brand);

  /* RESTRICTIONS BUTTON */
  --color-bg-restrictions: var(--color-shadow);
  --color-bg-btn-restrictions: var(--color-dark);
  --color-bg-btn-restrictions-text: var(--color-light);
  --color-bg-btn-restrictions-hover: var(--color-brand-darken);
  --color-bg-btn-restrictions-text-hover: var(--color-light);

  /* PROMO BUTTON */
  --color-bg-btn-promo: var(--color-light);
  --color-border-btn-promo: var(--color-dark);
  --color-border-btn-promo-text: var(--color-dark);
  --color-bg-btn-promo-hover: var(--color-light);
  --color-border-btn-promo-hover: var(--color-dark);
  --color-border-btn-promo-text-hover: var(--color-dark);

  /* ALTERNATIVE */
  --color-alternative-btn: var(--color-light);
  --color-alternative-btn-border: var(--color-dark);
  --color-text-alternative-btn: var(--color-dark);
  --color-alternative-btn-hover: var(--color-medium-light);
  --color-alternative-btn-border-hover: var(--color-brand);
  --color-text-alternative-btn-hover: var(--color-dark);


  /* DRAWER / POPUP */  
  --color-bg-pop: var(--color-light);
  --color-text-pop-title: var(--color-brand);
  --font-text-pop-title: var(--font-primary);
  --color-border-pop: var(--color-brand);  
  
  /* INFORMATION ICON */  
  --color-info-signal: var(--color-brand);

  /* DISCOUNT/BEST OFFER SIGN */    
  --color-text-tag: var(--color-light);
  --color-bg-tag: var(--color-brand); /* tag for best offer sign */

  /* AMENITIES ICONS */    
  --color-amenities-icon: var(--color-dark);
  --color-bg-amenities-icon: var(--color-medium-light);

  /* DISCOUNT TAG */   
  --color-bg-tag-discount: var(--color-dark);
  --color-text-tag-discount: var(--color-light);  
  
  /* REZLOCK */ 
  --color-rezlock: #00953f;
  --color-btn-rezlock: var(--color-rezlock);
  --color-btn-text-rezlock: var(--color-light);
  --color-btn-rezlock-hover: var(--color-rezlock);
  --color-btn-text-rezlock-hover: var(--color-light);
  --color-btn-disabled: var(--color-brand-lighten);
  --color-info-icon: var(--color-dark);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}