body {
    background-color: #fff8f2;
    color: #0E2627;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-headline {
    font-family: 'Chewy', system-ui;
}

.font-accent {
    font-family: 'Indie Flower', cursive;
}

.organic-blob {
    position: absolute;
    z-index: -1;
    filter: blur(60px);
    opacity: 0.3;
}

.squishy-button {
    transition: transform 0.2s, box-shadow 0.2s;
}

.squishy-button:active {
    transform: scale(0.95);
}

.nav-item {
    color: #0E2627;
    font-weight: 600;
    transition: color 0.2s;
}

.nav-item:hover {
    color: #1E5A58;
}

.card-perspective {
    transition: transform 0.3s ease-out;
}

.card-perspective:hover {
    transform: translateY(-8px) rotate(-1deg);
}


/* =============================================
   FREE-TRIAL SIGN-UP DIALOG
   (matches CourseCardOverlay.vue — Chewy font + exact field styles)
   ============================================= */

.signup-dialog-inner {
    display: flex;
    flex-direction: row;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(14, 38, 39, 0.2);
}

@media (max-width: 700px) {
    .signup-dialog-inner { flex-direction: column; }
}

.signup-dialog-col-left {
    flex: 1;
    background: linear-gradient(135deg, #fff5ee 0%, #fde8d8 100%);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* font-h3 → Chewy */
.signup-badge {
    display: inline-block;
    background-color: #d95b3b;
    color: #fff;
    font-family: 'Chewy', cursive;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    width: fit-content;
    line-height: 1.4;
}

/* font-h2 → Chewy */
.signup-dialog-heading {
    font-family: 'Chewy', cursive;
    font-size: 1.6rem;
    font-weight: 400;
    color: #0e2627;
    line-height: 1.25;
    margin: 0;
}

.signup-dialog-heading-accent { color: #d95b3b; }

.signup-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* font-h2 → Chewy */
.signup-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: 'Chewy', cursive;
    font-size: 1rem;
    font-weight: 400;
    color: #1e5a58;
    line-height: 1.4;
}

.signup-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    background-color: #d95b3b;
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.signup-dialog-col-right {
    flex: 1;
    background: #fff;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.signup-dialog-success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 3rem 1rem;
    flex: 1;
}

.signup-dialog-success-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    font-size: 72px;
    color: #22c55e;
    display: block;
}

.signup-dialog-success-title {
    font-family: 'Chewy', cursive;
    font-size: 1.6rem;
    font-weight: 400;
    color: #0e2627;
    margin: 0;
}

.signup-dialog-success-subtitle {
    font-family: 'Chewy', cursive;
    font-size: 1rem;
    color: #4a5568;
    font-weight: 400;
    margin: 0;
}

/* 2×3 grid like .registration-form-grid */
.signup-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.25rem;
}

@media (max-width: 500px) {
    .signup-form-grid { grid-template-columns: 1fr; }
}

.signup-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* font-h2 → Chewy, .form-label scoped size */
.signup-field-label {
    display: block;
    font-family: 'Chewy', cursive;
    font-size: 0.85rem;
    font-weight: 400;
    color: #0e2627;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* global input style من frontend/src/index.css:
   bg-surface-container-low border-2 border-outline-variant rounded-full px-6 py-2
   focus:outline-none focus:border-primary focus:bg-surface-container-low transition-colors */
.signup-field-input {
    width: 100%;
    padding: 0.5rem 1.5rem !important;           /* py-2 px-6 */
    border: 2px solid #dfc0b8 !important;        /* border-2 border-outline-variant */
    border-radius: 9999px !important;            /* rounded-full */
    font-family: 'Chewy', cursive !important;  /* font-h2 */
    font-size: 1rem !important;                  /* text-body-md = 16px */
    font-weight: 400;
    color: #0e2627 !important;              /* text-on-surface */
    background: #fdf2e3 !important;              /* bg-surface-container-low */
    outline: none;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    height: auto !important;
    appearance: none !important;
    -webkit-appearance: none!important;
}

.signup-field-input:focus {
    border-color: #d95b3b;            /* focus:border-primary */
    background: #fdf2e3 !important;              /* focus:bg-surface-container-low */
    outline: none;
}

.signup-field-input::placeholder { color: #a0aec0; }

.signup-field-input:disabled {
    background-color: #f0f0f0;
    color: #4a5568;
    cursor: not-allowed;
}

.signup-form-submit-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: auto;
}

/* .btn-lms من frontend/src/index.css */
.signup-dialog-submit {
    width: 100%;
    background-color: #d95b3b !important;
    color: #fff !important;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-family: 'Chewy', cursive !important;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 3px 6px 0 #2D6A6A;
    display: block;
}

.signup-dialog-submit:hover {
    background-color: #c44d2e !important;
    transform: translate(-2px, -2px);
    box-shadow: 5px 9px 0 #2D6A6A;
}

.signup-dialog-submit:active { transform: translateY(0); }

.signup-dialog-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* .registration-note.font-h2 → Chewy */
.signup-dialog-note {
    font-family: 'Chewy', cursive;
    font-size: 0.85rem;
    font-weight: 400;
    color: #94a3b8;
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

/* سهم القائمة بلون outline-variant (#dfc0b8) */
select.signup-field-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dfc0b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.9rem;
    padding-right: 2.5rem;
}