/**
 * Park Train Tracker — Public Ticket Purchase Styles
 * @version 1.0.0
 */

/* ── Container ──────────────────────────────────── */
.ptt-ticket-purchase {
    max-width: 540px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── State messages ─────────────────────────────── */
.ptt-state-message {
    padding: 20px 24px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}
.ptt-state-message.ptt-state-info    { background: #e8f4fd; color: #1a5276; border: 1px solid #aed6f1; }
.ptt-state-message.ptt-state-warning { background: #fef9e7; color: #7d6608; border: 1px solid #f7dc6f; }
.ptt-state-message.ptt-state-danger  { background: #fdedec; color: #922b21; border: 1px solid #f1948a; }

/* Spinner */
.ptt-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 3px solid #ccc;
    border-top-color: #1a472a;
    border-radius: 50%;
    animation: ptt-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes ptt-spin { to { transform: rotate(360deg); } }

/* ── Form header ─────────────────────────────────── */
.ptt-ticket-form-header {
    text-align: center;
    padding: 20px 0 12px;
}
.ptt-ticket-form-header h2 {
    font-size: 26px;
    margin: 0 0 8px;
    color: #1a472a;
}
.ptt-capacity-bar {
    font-size: 13px;
    color: #777;
}

/* ── Form fields ─────────────────────────────────── */
.ptt-form-fields {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.ptt-form-group {
    margin-bottom: 18px;
}
.ptt-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.ptt-form-group label .required { color: #c0392b; }
.ptt-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color .2s;
    box-sizing: border-box;
}
.ptt-input:focus {
    outline: none;
    border-color: #1a472a;
    box-shadow: 0 0 0 3px rgba(26,71,42,.12);
}
.ptt-field-note {
    font-size: 12px;
    color: #888;
    margin: 5px 0 0;
}

/* ── Quantity control ───────────────────────────── */
.ptt-qty-control {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}
.ptt-qty-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 2px solid #1a472a;
    background: #fff;
    color: #1a472a;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, color .15s;
}
.ptt-qty-btn:hover { background: #1a472a; color: #fff; }
.ptt-qty-display {
    font-size: 26px;
    font-weight: 700;
    color: #1a472a;
    min-width: 32px;
    text-align: center;
}
.ptt-total-display {
    font-size: 15px;
    color: #555;
}
.ptt-total-display strong { color: #1a472a; font-size: 18px; }

/* ── Square card container ──────────────────────── */
#ptt-card-container {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    min-height: 90px;
}

/* ── Error message ──────────────────────────────── */
.ptt-error-msg {
    background: #fdedec;
    color: #922b21;
    border: 1px solid #f1948a;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 12px;
}

/* ── Buy button ─────────────────────────────────── */
.ptt-buy-button {
    display: block;
    width: 100%;
    padding: 14px;
    background: #1a472a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .2s, transform .1s;
    margin-top: 6px;
}
.ptt-buy-button:hover { background: #145a32; color: #fff; }
.ptt-buy-button:active { transform: scale(.98); }
.ptt-buy-button:disabled { background: #aaa; cursor: not-allowed; }

/* ── Secure note ────────────────────────────────── */
.ptt-secure-note {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

/* ── Success screen ─────────────────────────────── */
.ptt-success-card {
    text-align: center;
    padding: 32px 24px;
    background: #eafaf1;
    border: 1px solid #a9dfbf;
    border-radius: 12px;
}
.ptt-success-icon { font-size: 52px; margin-bottom: 12px; }
.ptt-success-card h2 { color: #1e8449; margin: 0 0 10px; font-size: 26px; }
.ptt-success-card p  { color: #555; font-size: 15px; margin-bottom: 20px; }

#ptt-success-tickets {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 20px 0;
}
.ptt-success-ticket {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.ptt-success-code {
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    color: #1a472a;
    margin: 0 0 8px;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 480px) {
    .ptt-form-fields { padding: 16px; }
    .ptt-ticket-form-header h2 { font-size: 20px; }
}

/* ── Time slot picker (public) ─────────────────── */
.ptt-slot-picker-section {
    background: #f8fdf9;
    border: 1px solid #c8e6c9;
    border-radius: 10px;
    padding: 18px 16px;
    margin-bottom: 18px;
}
.ptt-slot-label {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1a472a;
}
.ptt-slot-subtext {
    font-size: 13px;
    color: #666;
    margin: 0 0 14px;
}
.ptt-slot-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
    gap: 10px;
}
.ptt-slot-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ptt-slot-btn:hover    { border-color: #1a472a; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(26,71,42,.12); }
.ptt-slot-selected     { border-color: #1a472a !important; background: #f0f7f2 !important; box-shadow: 0 0 0 3px rgba(26,71,42,.12); }
.ptt-slot-selected::after {
    content: '✓';
    position: absolute;
    top: 4px; right: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #1a472a;
}
.ptt-slot-unavailable  { opacity: .45; cursor: not-allowed; background: #f8f8f8; }
.ptt-slot-urgent       { border-color: #e65100 !important; }
.ptt-slot-urgent .ptt-slot-avail { color: #e65100 !important; font-weight: 600; }

.ptt-slot-time         { font-size: 16px; font-weight: 700; color: #1a472a; line-height: 1.1; }
.ptt-slot-avail        { font-size: 11px; color: #777; margin-top: 4px; }

/* Capacity bar inside each slot button */
.ptt-slot-bar {
    width: 80%;
    height: 3px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.ptt-slot-bar-fill {
    height: 100%;
    background: #1a472a;
    border-radius: 2px;
    transition: width .3s;
}
.ptt-slot-urgent .ptt-slot-bar-fill  { background: #e65100; }
.ptt-slot-unavailable .ptt-slot-bar-fill { background: #bbb; width: 100% !important; }

/* Form fields reveal animation */
.ptt-form-fields {
    animation: none;
}
.ptt-fields-visible {
    animation: ptt-reveal .3s ease;
}
@keyframes ptt-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Bot protection ──────────────────────────── */
/* Honeypot — must be visually and interactively hidden */
.ptt-hp-field {
    position: absolute !important;
    left: -9999px !important;
    top:  -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Sold-out slot state ─────────────────────── */
#ptt-slots-sold-out { }

/* ── QR canvas on success screen ─────────────── */
.ptt-qr-canvas canvas {
    display: block;
    margin: 0 auto;
    border-radius: 6px;
}