/* ============================================================
   Teambuilding Modal Plugin — modal.css
   ============================================================ */

/* ── Reset & tokens ──────────────────────────────────────── */
:where(#tbm-overlay, #tbm-overlay *, #tbm-overlay *::before, #tbm-overlay *::after) {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

:root {
    --tbm-green:       #8DC63F;
    --tbm-green-dark:  #6aa832;
    --tbm-red:         #d90416;
    --tbm-red-dark:    #b90010;
    --tbm-green-glow:  rgba(141, 198, 63, 0.35);
    --tbm-text:        #1a1a1a;
    --tbm-muted:       #6b7280;
    --tbm-border:      #e5e7eb;
    --tbm-radius:      16px;
    --tbm-transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Overlay ─────────────────────────────────────────────── */
.tbm-overlay {
    position:        fixed;
    inset:           0;
    z-index:         999999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
    background:      rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity:         0;
    transition:      opacity var(--tbm-transition);
}
.tbm-overlay[hidden] {
    display: none;
}
.tbm-overlay.tbm-visible {
    opacity: 1;
}

/* ── Modal card ──────────────────────────────────────────── */
.tbm-modal {
    display:          flex;
    width:            100%;
    max-width:        820px;
    min-height:       440px;
    border:           4px solid var(--tbm-green);
    border-radius:    var(--tbm-radius);
    overflow:         hidden;
    box-shadow:       0 24px 60px rgba(0,0,0,0.3);
    background:       #fff;
    transform:        translateY(28px) scale(0.97);
    transition:       transform var(--tbm-transition), box-shadow var(--tbm-transition);
    will-change:      transform;
}
.tbm-overlay.tbm-visible .tbm-modal {
    transform: translateY(0) scale(1);
    box-shadow: 0 32px 80px rgba(0,0,0,0.35);
}

/* ── Left panel ──────────────────────────────────────────── */
.tbm-panel-left {
    flex:            0 0 42%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         48px 36px;
    background:      linear-gradient(160deg, #9bd212 0%, #96ca13 58%, #8fb90f 100%);
    text-align:      center;
    position:        relative;
    overflow:        hidden;
}
.tbm-panel-left::before {
    content:         '';
    position:        absolute;
    top:             -60px;
    right:           -60px;
    width:           220px;
    height:          220px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.08);
    pointer-events:  none;
}
.tbm-panel-left::after {
    content:         '';
    position:        absolute;
    bottom:          -80px;
    left:            -40px;
    width:           200px;
    height:          200px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.06);
    pointer-events:  none;
}

.tbm-left-icon {
    width:  92px;
    height: 92px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
    animation: tbm-float 3.5s ease-in-out infinite;
}
.tbm-event-card {
    position:       relative;
    display:        flex;
    align-items:    center;
    justify-content:center;
    width:          82px;
    height:         82px;
    margin:         5px auto;
    border-radius:  8px;
    background:     #202426;
    box-shadow:     0 12px 24px rgba(0, 0, 0, 0.22);
    transform:      rotate(3deg);
}
.tbm-event-card::before {
    content:    '';
    position:   absolute;
    inset:      18px;
    background: #111315;
}
.tbm-event-dot {
    position:      relative;
    width:         28px;
    height:        28px;
    border-radius: 9px 9px 13px 13px;
    background:    radial-gradient(circle at 34% 24%, #fff2b2 0 12%, #dba74e 42%, #795521 100%);
    box-shadow:    inset 0 0 0 2px rgba(255,255,255,0.35), 0 5px 12px rgba(0,0,0,0.28);
    z-index:       1;
}

@keyframes tbm-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.tbm-left-title {
    font-family:    'Arial Black', Arial, sans-serif;
    font-size:      clamp(20px, 3vw, 26px);
    font-weight:    900;
    color:          #314407;
    letter-spacing: 0;
    text-shadow:    none;
    line-height:    1.2;
    margin-bottom:  16px;
    position:       relative;
    z-index:        1;
}

.tbm-left-subtitle {
    font-size:   14px;
    font-weight: 700;
    color:       #314407;
    line-height: 1.6;
    max-width:   220px;
    position:    relative;
    z-index:     1;
}

/* ── Right panel ─────────────────────────────────────────── */
.tbm-panel-right {
    flex:       1;
    background: #fff;
    padding:    40px 36px 36px;
    position:   relative;
    overflow-y: auto;
}

/* ── Close button ────────────────────────────────────────── */
.tbm-close {
    position:         absolute;
    top:              14px;
    right:            14px;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    border:           none;
    background:       #1a1a1a;
    color:            #fff;
    font-size:        20px;
    line-height:      1;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background var(--tbm-transition), transform var(--tbm-transition);
    z-index:          10;
}
.tbm-close:hover {
    background:  #333;
    transform:   rotate(90deg) scale(1.1);
}

/* ── Form title ──────────────────────────────────────────── */
.tbm-form-title {
    font-family:  'Arial Black', Arial, sans-serif;
    font-size:    clamp(18px, 2.5vw, 24px);
    font-weight:  800;
    color:        var(--tbm-text);
    line-height:  1.3;
    margin-bottom: 10px;
    padding-right: 40px;
}

.tbm-form-accent {
    width:            48px;
    height:           4px;
    background:       var(--tbm-red);
    border-radius:    999px;
    margin-bottom:    24px;
    transition:       width 0.6s ease;
}
.tbm-panel-right:hover .tbm-form-accent {
    width: 80px;
}

/* ── Fields ──────────────────────────────────────────────── */
.tbm-field-group {
    margin-bottom: 16px;
}
.tbm-field-group label {
    display:        block;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    color:          #3f4633;
    margin-bottom:  6px;
    text-transform: uppercase;
}

.tbm-field-group input {
    width:         100%;
    padding:       12px 14px;
    border:        1.5px solid var(--tbm-border);
    border-radius: 10px;
    font-size:     15px;
    color:         var(--tbm-text);
    background:    #fafafa;
    outline:       none;
    transition:    border-color var(--tbm-transition), box-shadow var(--tbm-transition), background var(--tbm-transition);
    -webkit-appearance: none;
}
.tbm-field-group input:focus {
    border-color: var(--tbm-red);
    background:   #fff;
    box-shadow:   0 0 0 4px rgba(217, 4, 22, 0.14);
}
.tbm-field-group input.tbm-invalid {
    border-color: #ef4444;
    box-shadow:   0 0 0 4px rgba(239, 68, 68, 0.15);
}
.tbm-field-group input::placeholder {
    color: #b0b7c3;
}

/* Phone wrapper */
.tbm-phone-wrap {
    position: relative;
}
.tbm-phone-icon {
    position:    absolute;
    left:        13px;
    top:         50%;
    transform:   translateY(-50%);
    color:       var(--tbm-muted);
    display:     flex;
    align-items: center;
    pointer-events: none;
}
.tbm-phone-wrap input {
    padding-left: 40px;
}

/* Field errors */
.tbm-field-error {
    display:    block;
    font-size:  12px;
    color:      #ef4444;
    margin-top: 4px;
    min-height: 16px;
}

/* ── Submit button ───────────────────────────────────────── */
.tbm-submit-btn {
    width:            100%;
    padding:          15px 24px;
    background:       var(--tbm-red);
    color:            #fff;
    border:           none;
    border-radius:    10px;
    font-size:        14px;
    font-weight:      800;
    letter-spacing:   0.06em;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    margin-top:       8px;
    transition:       transform var(--tbm-transition), box-shadow var(--tbm-transition), filter var(--tbm-transition);
    box-shadow:       0 8px 22px rgba(217, 4, 22, 0.2);
}
.tbm-submit-btn:hover {
    transform:  translateY(-2px);
    background: var(--tbm-red-dark);
    box-shadow: 0 12px 28px rgba(217, 4, 22, 0.28);
    filter:     none;
}
.tbm-submit-btn:active {
    transform:  translateY(0);
    box-shadow: 0 4px 12px rgba(217, 4, 22, 0.2);
}
.tbm-submit-btn:disabled {
    opacity:   0.7;
    cursor:    not-allowed;
    transform: none;
}

/* Spinner */
.tbm-spinner {
    width:    20px;
    height:   20px;
    animation: tbm-spin 0.8s linear infinite;
}
.tbm-spinner circle {
    stroke:           #fff;
    stroke-linecap:   round;
    stroke-dasharray: 100;
    stroke-dashoffset: 75;
}
@keyframes tbm-spin {
    to { transform: rotate(360deg); }
}

/* ── Form note ───────────────────────────────────────────── */
.tbm-form-note {
    display:      flex;
    align-items:  flex-start;
    gap:          8px;
    margin-top:   14px;
    padding:      12px 14px;
    background:   #f1f2f3;
    border-radius: 8px;
    font-size:    13px;
    color:        #374151;
    line-height:  1.5;
    border:       none;
}
.tbm-form-note svg {
    flex-shrink: 0;
    width:       14px;
    height:      14px;
    margin-top:  2px;
    color:       var(--tbm-green);
}

/* ── Success state ───────────────────────────────────────── */
.tbm-success {
    text-align:  center;
    padding:     32px 16px;
    animation:   tbm-fade-in 0.4s ease;
}
.tbm-success-icon {
    font-size:     52px;
    margin-bottom: 16px;
    animation:     tbm-bounce 0.6s ease;
}
.tbm-success-title {
    font-size:     20px;
    font-weight:   800;
    color:         var(--tbm-text);
    margin-bottom: 10px;
}
.tbm-success-text {
    font-size:   15px;
    color:       var(--tbm-muted);
    line-height: 1.6;
}
@keyframes tbm-bounce {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.2); }
}
@keyframes tbm-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Shortcode button ────────────────────────────────────── */
.tbm-shortcode-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          15px 32px;
    background:       linear-gradient(135deg, var(--tbm-green) 0%, var(--tbm-green-dark) 100%);
    color:            #fff;
    border:           none;
    border-radius:    10px;
    font-size:        14px;
    font-weight:      800;
    letter-spacing:   0.06em;
    cursor:           pointer;
    text-transform:   uppercase;
    box-shadow:       0 4px 16px rgba(141, 198, 63, 0.4);
    transition:       transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.tbm-shortcode-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 24px rgba(141, 198, 63, 0.55);
    filter:     brightness(1.05);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .tbm-modal {
        flex-direction: column;
        max-height:     95dvh;
        overflow-y:     auto;
    }
    .tbm-panel-left {
        flex:    none;
        min-height: 210px;
        padding: 18px 20px 20px;
    }
    .tbm-panel-right {
        padding: 28px 20px 28px;
    }
    .tbm-left-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }
    .tbm-event-card {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    .tbm-event-card::before {
        inset: 11px;
    }
    .tbm-event-dot {
        width: 17px;
        height: 17px;
        border-radius: 6px 6px 8px 8px;
    }
    .tbm-left-title {
        font-size: 20px;
        margin-bottom: 8px;
        max-width: 280px;
    }
    .tbm-left-subtitle {
        font-size: 12px;
        line-height: 1.35;
        max-width: 260px;
    }
    .tbm-form-title {
        font-size: 20px;
    }
}