/**
 * Event Manager Pro — Public CSS — Lacyme Design
 * All selectors scoped under #emp-event-manager for theme isolation.
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
#emp-event-manager {
    --emp-primary:      #FF4D29;
    --emp-dark:         #37141A;
    --emp-beige:        #F2E8DF;
    --emp-maroon:       #5A2A2D;
    --emp-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --emp-font-serif:   'Playfair Display', Georgia, serif;
    --emp-radius:       8px;
    --emp-shadow-lg:    0 12px 40px rgba(55,20,26,.16);
    --emp-border:       rgba(55,20,26,.15);
    --emp-text:         #5A2A2D;
    --emp-text-muted:   rgba(90,42,45,.55);
    --emp-success-bg:   #f0fdf4;
    --emp-success-text: #166534;
    --emp-error-bg:     #fef2f2;
    --emp-error-text:   #991b1b;
    --emp-warn-bg:      #fff7ed;
    --emp-warn-text:    #92400e;
}

/* ── Wrapper reset + base ───────────────────────────────────────────────────── */
#emp-event-manager {
    font-family:   var(--emp-font) !important;
    font-size:     16px;
    line-height:   1.5;
    color:         var(--emp-text);
    background:    var(--emp-beige);
    max-width:     1100px;
    margin:        2rem auto;
    padding:       3.5rem 2.5rem;
    box-sizing:    border-box;
    border-radius: 16px;
    overflow:      hidden;
    position:      relative;
}

/* Wave decorator — matches Gemini mockup (bottom-right corner) */
#emp-event-manager::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    right:      0;
    width:      55%;
    height:     70%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,1000 C300,800 400,900 700,700 C900,550 1000,400 1000,0 L1000,1000 Z' fill='%2337141A'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: bottom right;
    background-size:     cover;
    opacity:    0.07;
    pointer-events: none;
    z-index:    0;
}

/* Ensure layout sits above the wave */
#emp-event-manager .emp-layout {
    position: relative;
    z-index:  1;
}

/* Reset all direct children typography influenced by theme */
#emp-event-manager *,
#emp-event-manager *::before,
#emp-event-manager *::after {
    box-sizing: border-box;
}

#emp-event-manager p {
    font-weight: 400 !important;
    margin:      0;
}

#emp-event-manager a {
    color: var(--emp-primary);
    text-decoration: none;
}

/* ── Two-column grid ────────────────────────────────────────────────────────── */
#emp-event-manager .emp-layout {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   3.5rem !important;
    align-items:           start !important;
}

#emp-event-manager .emp-layout__form {
    position: sticky;
    top:      2rem;
}

/* ── LEFT COLUMN: info panel ────────────────────────────────────────────────── */
#emp-event-manager .emp-info-panel {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

#emp-event-manager .emp-logo {
    margin-bottom: .5rem;
}

#emp-event-manager .emp-logo__img {
    max-width:  140px;
    max-height: 64px;
    object-fit: contain;
    display:    block;
}

/* Sur-titre */
#emp-event-manager .emp-surtitle {
    display:        block;
    font-family:    var(--emp-font) !important;
    font-size:      .75rem !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: .2em;
    color:          var(--emp-primary) !important;
    margin:         0 0 .5rem;
    line-height:    1;
}

/* Event title: big serif, mixed weight handled via CSS */
#emp-event-manager .emp-event-title {
    font-family: var(--emp-font-serif) !important;
    font-size:   clamp(2.2rem, 5vw, 3.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color:       var(--emp-dark) !important;
    margin:      0 0 1rem !important;
}

/* Italic word inside title gets primary color */
#emp-event-manager .emp-event-title em {
    font-style: italic !important;
    color:      var(--emp-primary) !important;
    font-weight: 700 !important;
}

/* Description */
#emp-event-manager .emp-event-description {
    font-size:   1.05rem;
    line-height: 1.7;
    color:       var(--emp-maroon);
    max-width:   480px;
    margin-bottom: .5rem;
}

#emp-event-manager .emp-event-description p {
    font-weight: 400 !important;
    margin:      0 0 .5rem !important;
}

/* Info block: date / time / location */
#emp-event-manager .emp-event-info {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    padding:        1.5rem 0;
    border-top:     1px solid var(--emp-border);
    border-bottom:  1px solid var(--emp-border);
    margin-top:     .5rem;
}

#emp-event-manager .emp-info-row {
    display:     flex;
    align-items: flex-start;
    gap:         1rem;
}

#emp-event-manager .emp-info-icon {
    font-size:   1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top:  .1rem;
}

#emp-event-manager .emp-info-main {
    font-weight: 700 !important;
    font-size:   1.05rem !important;
    margin:      0 0 .2rem !important;
    color:       var(--emp-dark) !important;
    line-height: 1.3 !important;
}

#emp-event-manager .emp-info-sub {
    font-size:      .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--emp-text-muted);
    font-style:     italic;
    margin:         0 !important;
}

/* Navigation links */
#emp-event-manager .emp-nav-links {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem;
    margin-top: .75rem;
}

#emp-event-manager .emp-nav-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         5px 14px;
    border-radius:   50px;
    border:          1px solid var(--emp-border);
    background:      #fff;
    color:           var(--emp-maroon) !important;
    font-size:       .78rem;
    font-weight:     600;
    text-decoration: none !important;
    transition:      border-color .2s, color .2s;
    line-height:     1.6;
}

#emp-event-manager .emp-nav-link:hover {
    border-color: var(--emp-primary);
    color:        var(--emp-primary) !important;
}

#emp-event-manager .emp-nav-link img,
#emp-event-manager .emp-nav-link svg {
    display:    inline-block;
    flex-shrink: 0;
}

/* ── RIGHT COLUMN: form card ────────────────────────────────────────────────── */
#emp-event-manager .emp-form-card {
    background: #fff;
    padding:    2.75rem 3rem;
    box-shadow: var(--emp-shadow-lg);
    position:   relative;
    overflow:   hidden;
    /* No border-radius = flush with screenshot */
}

#emp-event-manager .emp-form-card__deco {
    position:       absolute;
    top:            -10px;
    right:          -10px;
    width:          110px;
    opacity:        .07;
    pointer-events: none;
    user-select:    none;
}

#emp-event-manager .emp-form-card__title {
    font-family: var(--emp-font-serif) !important;
    font-style:  italic !important;
    font-size:   1.8rem !important;
    font-weight: 700 !important;
    color:       var(--emp-dark) !important;
    margin:      0 0 1.75rem !important;
    line-height: 1.2 !important;
}

/* Spots badge */
#emp-event-manager .emp-spots-left {
    display:       inline-block;
    background:    var(--emp-primary);
    color:         #fff !important;
    padding:       .3rem .9rem;
    border-radius: 999px;
    font-size:     .82rem;
    font-weight:   600;
    margin-bottom: 1.25rem;
    line-height:   1.5;
}

/* ── Form ───────────────────────────────────────────────────────────────────── */
#emp-event-manager .emp-form {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

#emp-event-manager .emp-form-row {
    display:   flex;
    gap:       1.5rem;
    flex-wrap: wrap;
}

#emp-event-manager .emp-form-row--half > .emp-form-group {
    flex:      1 1 calc(50% - .75rem);
    min-width: 120px;
}

#emp-event-manager .emp-form-group {
    display:        flex;
    flex-direction: column;
    gap:            .15rem;
}

/* ── Underline inputs ───────────────────────────────────────────────────────── */
#emp-event-manager .emp-input {
    appearance:    none !important;
    -webkit-appearance: none !important;
    background:    transparent !important;
    border:        none !important;
    border-bottom: 1.5px solid rgba(55,20,26,.2) !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    padding:       .75rem 0 !important;
    width:         100% !important;
    font-size:     .95rem !important;
    font-family:   var(--emp-font) !important;
    color:         var(--emp-dark) !important;
    outline:       none !important;
    transition:    border-color .25s;
    line-height:   1.5 !important;
}

#emp-event-manager .emp-input::placeholder {
    color: var(--emp-text-muted) !important;
}

#emp-event-manager .emp-input:focus {
    border-bottom-color: var(--emp-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}

#emp-event-manager .emp-input.emp-input--error {
    border-bottom-color: #F44336 !important;
}

#emp-event-manager .emp-error {
    color:      #F44336;
    font-size:  .78rem;
    min-height: 1em;
    display:    block;
}

#emp-event-manager .emp-checking {
    color:     var(--emp-text-muted);
    font-size: .78rem;
}

/* ── Custom checkbox ────────────────────────────────────────────────────────── */
#emp-event-manager .emp-form-group--checkbox {
    flex-direction: row;
    align-items:    flex-start;
    gap:            .5rem;
}

#emp-event-manager .emp-checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         .65rem;
    font-size:   .9rem;
    cursor:      pointer;
    user-select: none;
    line-height: 1.4;
    font-weight: 400 !important;
}

/* Hide native checkbox */
#emp-event-manager .emp-checkbox-label input[type="checkbox"],
#emp-event-manager input[type="checkbox"].emp-hidden-checkbox {
    position: absolute !important;
    opacity:  0 !important;
    width:    0 !important;
    height:   0 !important;
    pointer-events: none;
}

/* Custom box */
#emp-event-manager .emp-checkmark {
    flex-shrink: 0;
    display:     inline-block;
    width:       18px;
    height:      18px;
    min-width:   18px;
    border:      1.5px solid rgba(55,20,26,.4);
    background:  #fff;
    position:    relative;
    top:         1px;
    transition:  border-color .2s;
}

#emp-event-manager .emp-checkbox-label:has(input[type="checkbox"]:checked) .emp-checkmark {
    border-color: var(--emp-primary);
}

#emp-event-manager .emp-checkbox-label:has(input[type="checkbox"]:checked) .emp-checkmark::after {
    content:     '✓';
    position:    absolute;
    left:        2px;
    top:         -2px;
    color:       var(--emp-primary);
    font-weight: 700;
    font-size:   13px;
    line-height: 1;
}

#emp-event-manager .emp-rgpd-group {
    flex-direction: column;
    align-items:    flex-start;
}

/* ── Delegate fields ────────────────────────────────────────────────────────── */
#emp-event-manager .emp-delegate-fields {
    background:    var(--emp-beige);
    border-radius: var(--emp-radius);
    padding:       1rem 1.25rem;
}

/* ── Submit button ──────────────────────────────────────────────────────────── */
#emp-event-manager .emp-form-actions {
    margin-top: .25rem;
}

#emp-event-manager .emp-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             .6rem !important;
    padding:         1.05rem 2.5rem !important;
    border-radius:   50px !important;
    font-size:       .82rem !important;
    font-weight:     700 !important;
    letter-spacing:  .1em !important;
    text-transform:  uppercase !important;
    border:          none !important;
    cursor:          pointer !important;
    text-decoration: none !important;
    line-height:     1 !important;
    transition:      transform .3s cubic-bezier(.175,.885,.32,1.275),
                     box-shadow .3s ease;
}

#emp-event-manager .emp-btn--primary {
    background: var(--emp-primary) !important;
    color:      #fff !important;
}

#emp-event-manager .emp-btn--primary:hover {
    transform:  scale(1.04) !important;
    box-shadow: 0 10px 28px rgba(255,107,53,.3) !important;
}

#emp-event-manager .emp-btn--primary:active {
    transform: scale(.97) !important;
}

#emp-event-manager .emp-btn--primary:disabled,
#emp-event-manager .emp-btn--primary[disabled] {
    opacity:    .55;
    cursor:     not-allowed !important;
    transform:  none !important;
    box-shadow: none !important;
}

#emp-event-manager .emp-btn--waitlist {
    background: #FF9800 !important;
    color:      #fff !important;
}

#emp-event-manager .emp-btn--waitlist:hover {
    background: #e68900 !important;
}

/* SVG arrow inside button */
#emp-event-manager .emp-btn svg {
    flex-shrink: 0;
}

/* ── Form feedback ──────────────────────────────────────────────────────────── */
#emp-event-manager .emp-form-message {
    border-radius: var(--emp-radius);
    padding:       .85rem 1rem;
    font-size:     .9rem;
    line-height:   1.5;
    margin-top:    .75rem;
}

#emp-event-manager .emp-form-message--success {
    background: var(--emp-success-bg);
    color:      var(--emp-success-text);
    border:     1px solid #bbf7d0;
}

#emp-event-manager .emp-form-message--error {
    background:  var(--emp-error-bg);
    color:       var(--emp-error-text);
    border:      1px solid #fca5a5;
    border-left: 4px solid #F44336;
}

#emp-event-manager .emp-form-message--waiting {
    background:  var(--emp-warn-bg);
    color:       var(--emp-warn-text);
    border:      1px solid #fcd34d;
    border-left: 4px solid #FF9800;
}

/* ── Success card ───────────────────────────────────────────────────────────── */
#emp-event-manager .emp-success-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        3rem 1.5rem;
    gap:            1rem;
    animation:      empSlideUp .5s ease-out;
}

@keyframes empSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

#emp-event-manager .emp-success-card__logo {
    height:  40px;
    opacity: .15;
}

#emp-event-manager .emp-success-card__title {
    font-family: var(--emp-font-serif) !important;
    font-style:  italic !important;
    font-size:   1.7rem !important;
    color:       var(--emp-primary) !important;
    margin:      0 !important;
}

#emp-event-manager .emp-success-card__text {
    color:       var(--emp-text-muted);
    font-size:   1rem;
    line-height: 1.6;
    margin:      0 !important;
}

/* ── Full / closed message ──────────────────────────────────────────────────── */
#emp-event-manager .emp-full-message__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1rem;
    text-align:     center;
    padding:        2rem 1rem;
    color:          var(--emp-text-muted);
}

#emp-event-manager .emp-full-message__inner svg { opacity: .4; }

/* ── Waitlist notice ────────────────────────────────────────────────────────── */
#emp-event-manager .emp-waitlist-notice {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    background:    var(--emp-warn-bg);
    color:         var(--emp-warn-text);
    border:        1px solid #fcd34d;
    border-left:   4px solid #FF9800;
    border-radius: var(--emp-radius);
    padding:       .85rem 1rem;
    margin-bottom: 1.25rem;
    font-size:     .9rem;
    line-height:   1.5;
}

#emp-event-manager .emp-waitlist-notice p {
    margin: 0 !important;
}

/* ── Responsive — tablet ≤ 900px ────────────────────────────────────────────── */
@media (max-width: 900px) {
    #emp-event-manager .emp-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    #emp-event-manager .emp-layout__form {
        position: static;
    }

    #emp-event-manager {
        padding: 2rem 1.25rem;
    }
}

/* ── Responsive — mobile ≤ 600px ────────────────────────────────────────────── */
@media (max-width: 600px) {
    #emp-event-manager {
        margin:        0;
        padding:       1.5rem 1rem;
        border-radius: 0;
    }

    #emp-event-manager .emp-event-title {
        font-size: 2rem !important;
    }

    #emp-event-manager .emp-form-card {
        padding: 1.75rem 1.25rem;
    }

    #emp-event-manager .emp-form-row--half > .emp-form-group {
        flex: 1 1 100% !important;
    }

    #emp-event-manager .emp-btn {
        width: 100% !important;
    }
}