/*
Theme: La Part des Amis
Description: Styles for the La Part des Amis questionnaire and results pages.
*/

/* ==========================================================================
   1. Imports and Root Variables
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Baskervville&family=Quicksand&display=swap');

   :root {
       --bg: #f9fdfa;
       --text: #e0994b;
       --accent: #CC8B44;
       --alter: #52483e;
       --secondary: #faf4e3;
       --tertiary: #FBFAF4;
       --hover: #654321;
       --font-main: 'Quicksand', sans-serif;
       --font-title: "Baskervville", serif;
   }
   
   /* ==========================================================================
      2. General Styles
      ========================================================================== */
   
   body {
       background: linear-gradient(to top, var(--bg), var(--secondary));
       color: var(--alter);
       font-family: var(--font-main);
       line-height: 1.6;
       margin: 0;
       padding: 20px;
       font-optical-sizing: auto;
       font-weight: 400;
   }
   
   .container {
       max-width: 800px;
       margin: 0 auto;
       background: var(--bg);
       padding: 30px;
       box-shadow: 0 0 3px var(--accent);
   }
   
   h1, h2, h3 {
       font-family: var(--font-title);
       font-weight: 400;
       font-style: normal;
       color: var(--text);
   }
   
   h1 {
       border-bottom: 1px solid var(--text);
       padding-bottom: 10px;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       text-align: center;
   }
   
   /* ==========================================================================
      3. Form Styles
      ========================================================================== */
   
      .intro {
        padding: 0px 20px;
        text-align: center;
      }
   
      form#wineForm {} /* Add custom style for wine form if needed */
   
   .question-group {
       background: var(--bg);
       padding: 5px;
       margin: 0px 0px 20px 0px;
       transition: all 0.3s ease;
   }
   
   /* .question-group:hover {
       background: var(--secondary);
   } */
   .question-group:hover h2 {
       color: var(--accent);
    }
    .question-group label:hover {
       color: var(--accent);
    }

    .question-group .wine-type:hover h3 {
        color: var(--accent);
    }
    .question-group .rating-item:hover {
        color: var(--accent);
    }
   
   label {
       display: block;
       margin: 10px 0;
       cursor: pointer;
       position: relative;
       padding-left: 30px;
   }
   
   /* Custom Radio Buttons */
   input[type="radio"],
   input[type="checkbox"] {
       position: absolute;
       opacity: 0;
   }
   
   .custom-radio {
       position: absolute;
       left: 0;
       top: 2px;
       height: 20px;
       width: 20px;
       border: 1px solid var(--text);
       border-radius: 50%;
   }
   
   input:checked ~ .custom-radio {
       background: var(--accent);
   }
   
   /* Text Inputs and Textareas */
   input[type="text"],
   textarea, input[type="email"] {
       background: var(--bg);
       font-family: var(--font-main);
       border: 1px solid var(--text);
       color: var(--alter);
       padding: 8px;
       border-radius: 4px;
       width: -webkit-fill-available;
       margin-top: 5px;
       min-height: 25px;
   }

   input[type="text"]:focus-visible, input[type="email"]:focus-visible {
       outline: none;
       border-color: var(--accent);
   }

   input[type="email"]:autofill {
        outline: none;
        border-color: var(--accent);
        background: var(--bg);
   }
   
   /* Required Field Indicator */
   .required::after {
       content: "*";
       color: #ff4444;
       margin-left: 3px;
   }

   .outro {
        display: flex;
        justify-content: center;
        align-items: center;
   }
   
   /* Submit Button */
   button[type="submit"] {
       background: linear-gradient(to right, var(--accent), var(--text));
       color: var(--bg);
       padding: 15px 40px;
       border: none;
       border-radius: 30px;
       font-size: 1.1em;
       cursor: pointer;
       transition: transform 0.3s ease;
       font-family: var(--font-main);
   }
   
   button[type="submit"]:hover {
       transform: scale(1.05);
   }

   .mentions {
        max-width: 800px;
        margin: 0 auto;
        padding: 30px;
   }
   
   /* ==========================================================================
      4. Ranking System Styles
      ========================================================================== */
   
   .ranking-system {
       display: flex;
       gap: 15px;
       flex-direction: column;
       margin: 20px 0;
   }
   
   .ranking-item {
       background: var(--bg);
       padding: 15px 25px;
       border-radius: 30px;
       border: 1px solid var(--accent);
       display: flex;
       align-items: center;
       gap: 15px;
       cursor: pointer;
       position: relative;
       transition: all 0.3s ease;
       min-height: 50px;
       background: var(--bg);
       -webkit-tap-highlight-color: transparent;
   }
   
   .ranking-item:active {
       background: var(--bg);
   }
   
   .ranking-item.ranked {
       border-color: var(--accent);
       color: var(--accent);
   }

   .ranking-item.ranked .rank-indicator {
        background: var(--accent);
        color: var(--bg);
        font-family: var(--font-main);
   }
   
   .rank-indicator {
       width: 30px;
       height: 30px;
       background: var(--secondary);
       color: var(--text);
       border: 1px solid var(--accent);
       border-radius: 30px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2em;
       flex: none;
   }
   
   .reset-ranking-btn {
       background: none;
       color: var(--text);
       border: 0px;
       margin-top: 15px;
       cursor: pointer;
       transition: all 0.3s ease;
       font-family: var(--font-main);
       font-size: 1em;
       padding-left:0px;
   }
   
   .reset-ranking-btn:hover {
       text-decoration: underline;
       color: var(--accent);
   }
   
   /* ==========================================================================
      5. Rating Scale Styles
      ========================================================================== */
   
   .rating-scale {
       display: flex;
       gap: 10px;
       margin: 15px 0;
   }
   
   .rating-btn {
       background: var(--secondary);
       border: 1px solid var(--accent);
       color: var(--text);
       padding: 8px 15px;
       border-radius: 500px;
       cursor: pointer;
       transition: all 0.3s ease;
   }
   
   .rating-btn.active {
       background: var(--accent);
       color: var(--bg);
   }
   
   /* ==========================================================================
      6. Conditional Question Styles
      ========================================================================== */
   .hidden {
       display: none;
   }
   
   /* ==========================================================================
      7. Wine Preferences
      ========================================================================== */
   
   .wine-type h3 {
       border-bottom: 1px solid var(--text);
   }
   
   .wine-preferences { /* Add custom style for wine preferences if needed */ }
   
   /* ==========================================================================
      8. Loading and Error Styles
      ========================================================================== */
   
   .loading {
       text-align: center;
   }
   
   .error {
       color: #ff4444;
       background: rgba(255, 68, 68, 0.1);
       padding: 15px;
       margin: 20px 0;
   }
   
   .success {
       padding: 15px;
   }
   
   /* Loading Container and Spinner */
   #loading-container {
       text-align: center;
       margin-top: 20px;
       padding: 20px;
   }
   
   .loading-spinner {
       border: 4px solid rgba(212, 175, 55, 0.3);
       border-radius: 50%;
       border-top: 4px solid var(--accent);
       width: 40px;
       height: 40px;
       animation: spin 1s linear infinite;
       margin: 0 auto 15px;
   }
   
   @keyframes spin {
       0% {
           transform: rotate(0deg);
       }
   
       100% {
           transform: rotate(360deg);
       }
   }
   
   .loading-status {
       color: var(--accent);
       font-family: var(--font-title);
       font-size: 1.5em;
   }
   
   .loading-error {
       color: #ff4444;
       margin-top: 10px;
   }
   
   /* ==========================================================================
      9. Wine Grid and Card Styles
      ========================================================================== */
   
   .wine-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 20px;
       margin-top: 50px;
       margin-bottom: 40px;
   }
   
   .wine-card {
       background: var(--tertiary);
       border-top: 1px solid var(--text);
       padding: 20px;
       transition: transform 0.3s ease;
   }
   
   .wine-card:hover {
       transform: translateY(-5px);
   }

   .wine-card:hover h3 {
       color: var(--text);
   }
   
   .wine-card h3 {
       color: var(--accent);
       margin: 0 0 15px 0;
       font-family: var(--font-title);
       font-size: 1.2em;
   }
   
   .wine-info {
       margin: 10px 0;
       display: grid;
       grid-template-columns: auto 1fr;
       gap: 10px;
       text-align: left;
   }
   
   .wine-label {
       color: var(--alter);
   }
   
   .wine-value {
       color: var(--alter);
       font-weight: bold;
   }
   
   .characteristics {
       padding-top: 15px;
       border-top: 1px solid var(--alter);
   }
   
   .characteristic-bar {
       height: 8px;
       background: var(--secondary);
       border-radius: 4px;
       margin: 5px 0;
       position: relative;
       top: 4px;
   }
   
   .characteristic-fill {
       height: 100%;
       background: var(--accent);
       border-radius: 4px;
       transition: width 0.3s ease;
   }
   
   /* ==========================================================================
      10. Call to Action Styles
      ========================================================================== */
   
   .cta-section {
       text-align: center;
   }

   .email-form-card {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.5s ease-in-out;
       background: var(--bg);
       border-radius: 10px;
       margin: 0px auto;
   }

   .email-form-card.visible {
       max-height: 300px;
   }

   .email-form-content {
       padding: 20px;
   }

   .email-form input[type="email"] {
        width: 320px;
        padding: 10px 0px 10px 10px;
        border: 1px solid var(--accent);
        border-radius: 5px;
        background: var(--secondary);
        color: var(--text);
        display: block;
        margin: 20px auto;
   }

   .email-form .submit-button {
    background: linear-gradient(to right, var(--accent), var(--text));
       color: var(--bg);
       padding: 15px 40px;
       border: none;
       border-radius: 30px;
       font-size: 1.1em;
       cursor: pointer;
       transition: transform 0.3s ease;
       text-decoration: none;
       display: inline-block;
       font-family: var(--font-main);
   }

   .email-form .submit-button:hover {
       transform: scale(1.05);
   }
   
   .cta-text {
       font-family: var(--font-main);
       font-size: 1em;
       color: var(--alter);
       margin-bottom: 25px;
   }
   
   .cta-button {
       background: linear-gradient(to right, var(--accent), var(--text));
       color: var(--bg);
       padding: 15px 40px;
       border: none;
       border-radius: 30px;
       font-size: 1.1em;
       cursor: pointer;
       transition: transform 0.3s ease;
       text-decoration: none;
       display: inline-block;
       font-family: var(--font-main);
   }
   
   .cta-button:hover {
       transform: scale(1.05);
   }
   
   .error-message {
       background-color: #fff3f3;
       border: 1px solid #ff9999;
       border-radius: 4px;
       padding: 15px;
       margin: 20px 0;
       text-align: center;
   }
   
   .error-message h3 {
       color: #cc0000;
       margin: 0 0 10px 0;
   }
   
   .error-message button {
       background-color: #cc0000;
       color: white;
       border: none;
       padding: 5px 15px;
       border-radius: 4px;
       margin-top: 10px;
       cursor: pointer;
   }
   
   .error-message button:hover {
       background-color: #990000;
   }

   .form-feedback {
     color: var(--text);
   }

   /* ==========================================================================
      11. Media queries for responsivity
      ========================================================================== */

    /* mobile screens only */

    @media only screen and (max-width: 767px) {

        /* Text Inputs and Textareas */
        input[type="text"],
        textarea, input[type="email"] {
            background: var(--bg);
            font-family: var(--font-main);
            border: 1px solid var(--text);
            color: var(--alter);
            padding: 8px;
            border-radius: 4px;
            width: -webkit-fill-available;
            margin-top: 5px;
            min-height: 25px;
        }
        
    }