/* My Skincare Customizations - Style Sheet v2.6 (Final with Quiz Link) */

/* --- Font Import (Professional, Blocky Look for Quiz) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@400;500&display=swap');

/* --- Core Variables (for a consistent, clinical feel) --- */
:root {
    --msc-primary-color: #3A7CA5; /* A calm, professional blue */
    --msc-dark-text: #2F3E46;      /* A strong, dark grey for headings */
    --msc-body-text: #546E7A;      /* A softer grey for body text */
    --msc-border-color: #D9D9D9;    /* A light grey for borders and lines */
    --msc-bg-color: #FFFFFF;        /* Clean white background */
    --msc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --msc-heading-font: 'Montserrat', sans-serif; /* Blocky heading font */
    --msc-quiz-body-font: 'Inter', sans-serif;      /* Clean quiz body font */
}

/* --- Global Container Style (Applies to Registration & Quiz) --- */
.msc-container {
    max-width: 500px;
    margin: 60px auto;
    padding: 40px;
    background-color: var(--msc-bg-color);
    border-radius: 16px;
    border: 1px solid var(--msc-border-color);
    box-shadow: 0 10px 30px rgba(47, 62, 70, 0.07);
    font-family: var(--msc-font-family);
    text-align: center;
}
.msc-container h2 {
    color: var(--msc-dark-text);
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 10px;
}
.msc-container p {
    color: var(--msc-body-text);
    margin-bottom: 30px;
    line-height: 1.6;
}

/* --- Form Specific Styling (Registration & My Account) --- */
.msc-form-container {
    text-align: left;
}
.msc-form-row {
    margin-bottom: 20px;
}
.msc-form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--msc-dark-text);
    font-size: 14px;
}

/* NEW: Styling for the helper text under the dropdown */
.msc-form-hint {
    font-size: 13px;
    color: var(--msc-body-text);
    opacity: 0.9;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1.5;
}
.msc-form-hint a {
    color: var(--msc-primary-color);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease-in-out;
}
.msc-form-hint a:hover {
    border-bottom-color: var(--msc-primary-color);
}


/* Input Fields & Select Dropdowns (Modern & Accessible) */
.msc-form-row .input-text, .msc-select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--msc-border-color);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #f9fafb;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.msc-form-row .input-text:focus, .msc-select:focus {
    outline: none;
    border-color: var(--msc-primary-color);
    box-shadow: 0 0 0 3px rgba(58, 124, 165, 0.2);
    background-color: var(--msc-bg-color);
}
.msc-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23546E7A%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
}

/* --- Buttons (Clear Call to Action) --- */
.msc-button {
    display: inline-block;
    width: 100%;
    padding: 15px;
    background-color: var(--msc-primary-color);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, opacity 0.3s, transform 0.2s;
}
.msc-button:hover {
    background-color: #2F6383;
    transform: translateY(-2px);
}
.msc-button:disabled {
    background-color: #A9C2D0;
    cursor: not-allowed;
    transform: none;
}

/* --- Skin Quiz Specific Styling (with NEW Fonts) --- */
.msc-quiz-container { max-width: 550px; }
.msc-quiz-container h2, .msc-quiz-container h3 {
    font-family: var(--msc-heading-font);
    font-weight: 700;
}
.msc-quiz-container p, .msc-quiz-container .quiz-answer label {
    font-family: var(--msc-quiz-body-font);
}
.quiz-header { margin-bottom: 25px; }
.quiz-progress-bar { width: 100%; height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden; }
.quiz-progress-bar-inner { height: 100%; width: 0%; background-color: var(--msc-primary-color); transition: width 0.4s ease; }
.quiz-answers { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; text-align: left; }
.quiz-answer { padding: 16px; border: 2px solid var(--msc-border-color); border-radius: 8px; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
.quiz-answer:hover { border-color: #A9C2D0; }
.quiz-answer.selected { border-color: var(--msc-primary-color); box-shadow: 0 0 0 3px rgba(58, 124, 165, 0.2); }
.quiz-answer label { cursor: pointer; font-weight: 500; font-size: 16px; }
.quiz-radio { display: none; }
#quiz-result-type { color: var(--msc-primary-color); font-size: 28px; margin-bottom: 10px; }

/* --- My Account Dashboard Welcome Message Styling --- */
.msc-dashboard-welcome { border: 1px solid var(--msc-border-color); border-radius: 12px; padding: 30px; background-color: #f9fafb; }
.msc-dashboard-welcome h3 { margin-top: 0; font-size: 24px; color: var(--msc-dark-text); }
.msc-dashboard-welcome p { color: var(--msc-body-text); font-size: 16px; }
.msc-profile-summary { display: flex; gap: 20px; margin: 25px 0; padding: 20px; background-color: var(--msc-bg-color); border-radius: 8px; border: 1px solid #e9ecef; }
.msc-profile-summary div { display: flex; flex-direction: column; }
.msc-profile-summary span { font-size: 12px; color: #828282; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.msc-profile-summary strong { font-size: 16px; font-weight: 600; color: var(--msc-dark-text); }