/*
 * TicketDrum styles - rewritten clean (v2.0).
 * 1. Frontend: event list, ticket tables, checkout, waitlist, promo
 * 2. Shared: forms, validation, modals
 * 3. Admin: polish, dashboard, check-in, custom field editor
 */

/* =========================================
   1. FRONTEND
   ========================================= */

.ticketdrum_container .button {
	display:inline-block; padding:10px 20px; border:1px solid #333; border-radius:3px;
	background:#333; color:#fff; font-size:14px; line-height:18px; text-align:center;
	text-decoration:none; white-space:nowrap; cursor:pointer; box-sizing:border-box; appearance:none;
}
.ticketdrum_container .button:hover { background:#000; color:#fff; }
.ticketdrum_container .button.large { padding:12px 30px; }

.ticketdrum_container input[type="text"],
.ticketdrum_container input[type="email"],
.ticketdrum_container input[type="number"],
.ticketdrum_container input[type="date"],
.ticketdrum_container select,
.ticketdrum_container textarea {
	display:inline-block; width:100%; height:42px; min-height:42px; padding:0 10px;
	border:1px solid #ccc; border-radius:3px; background:#fff; font-size:14px; line-height:20px;
	box-sizing:border-box; vertical-align:top; outline:none;
}
.ticketdrum_container textarea { min-height:160px; padding:10px; line-height:18px; }
.ticketdrum_container select.small { width:auto; }

/* Event list */
.ticketdrum-event { margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #ccc; }
.ticketdrum-event:last-child { border-bottom:0; }
.ticketdrum-event-header { display:flex; align-items:center; gap:14px; }
.ticketdrum-event-times { padding:10px 20px; text-align:center; background:#333; color:#fff; border-radius:3px; white-space:nowrap; }
.ticketdrum-event-times .year { display:block; font-size:18px; }
.ticketdrum-event-description { margin:10px 0; }
.ticketdrum-event-times-full { font-style:italic; }
.ticketdrum-spaces-left { display:inline-block; margin-left:20px; }

/* Ticket + checkout tables */
table.ticketdrum_table { width:100%; border-top:2px solid #555; margin-bottom:40px; border-collapse:collapse; }
table.ticketdrum_table th, table.ticketdrum_table td { padding:15px; border-bottom:1px solid #ccc; vertical-align:top; }
table.ticketdrum_table th { font-weight:bold; }
table.ticketdrum_table td { background:#fff; color:#121212; }
table.ticketdrum_table small { display:block; font-size:80%; opacity:.8; }
table.ticketdrum_table tbody tr:hover td { background:#fafafa; }
table.ticketdrum_table tfoot tr { background:#eee; }
table.ticketdrum_table .amount { text-align:right; white-space:nowrap; width:90px; }
table.ticketdrum_table .ticket-quantity-selector-td { width:60px; text-align:center; }
table.ticketdrum_table .ticket-quantity-selector-td select { min-height:0; height:32px; }
#ticketdrum_checkout_table td { vertical-align:middle; }

/* Per-ticket custom fields at checkout */
table.ticketdrum_table .custom_field_inputs { margin-top:10px; padding:10px; background:#fafafa; border:1px solid #ccc; }
table.ticketdrum_table .custom_field_inputs .row { flex-direction:column; align-items:flex-start; }
table.ticketdrum_table .custom_field_inputs .row .title-wrapper { width:100%; text-align:left; font-size:90%; }
table.ticketdrum_table .custom_field_inputs .row .input-wrapper { width:100%; }

/* Basket + checkout chrome */
#ticketdrum_basket_form .ticketdrum-buttons { display:flex; justify-content:space-between; align-items:center; }
#ticketdrum_checkout_form { background:#fff; padding:20px; }
#ticketdrum_checkout_form .show-attendee-list { cursor:pointer; }
#ticketdrum_checkout_form .attendee-list-hidden { display:none; }
#ticketdrum_checkout_form .attendee-list input { margin-bottom:5px; }
#card-element { display:block; width:100%; min-height:42px; padding:12px; border:1px solid #ccc; border-radius:3px; background:#fff; box-sizing:border-box; }

/* Ticket picker (embed + modal) */
.ticketdrum-tickets-header { margin-bottom:14px; padding-bottom:12px; border-bottom:2px solid #333; }
.ticketdrum-tickets-event { font-size:19px; font-weight:700; }
.ticketdrum-tickets-when { color:#666; font-size:13px; margin-top:2px; }
.ticketdrum-ticket-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 2px; border-bottom:1px solid #e2e2e2; }
.ticketdrum-ticket-info { min-width:0; }
.ticketdrum-ticket-name { display:block; font-weight:600; }
.ticketdrum-ticket-price { display:block; color:#666; font-size:14px; margin-top:2px; }
.ticketdrum-qty { display:flex; align-items:center; gap:0; flex:0 0 auto; }
.ticketdrum-qty .ticketdrum-qty-btn { width:36px; height:36px; padding:0; border:1px solid #bbb; background:#fff; border-radius:50%; font-size:18px; line-height:1; color:#333; cursor:pointer; appearance:none; }
.ticketdrum-qty .ticketdrum-qty-btn:hover { border-color:#333; }
.ticketdrum-qty input.quantity { width:44px !important; height:36px; min-height:36px; margin:0 2px; padding:0; border:none; background:none; text-align:center; font-size:16px; font-weight:600; }
.ticketdrum-picker-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; flex-wrap:wrap; }
.ticketdrum-picker-total { font-size:16px; }
.ticketdrum-picker-total b { font-size:20px; margin-left:6px; }
.ticketdrum-picker-actions { display:flex; align-items:center; gap:16px; }
.ticketdrum-picker-actions.ticketdrum-picker-disabled { opacity:.45; pointer-events:none; }
.ticketdrum-basket-link { color:#666; font-size:14px; text-decoration:underline; cursor:pointer; }
.ticketdrum-basket-link:hover { color:#111; }

/* Promo code */
.ticketdrum-promo-row { display:flex; gap:8px; align-items:center; margin:0 0 20px; flex-wrap:wrap; }
.ticketdrum-promo-row input { max-width:200px; text-transform:uppercase; }
.ticketdrum-promo-error { color:#d63638; font-size:13px; }
#ticketdrum_remove_promo { margin-left:6px; color:#d63638; font-weight:700; text-decoration:none; }

/* Waitlist */
.ticketdrum-waitlist { margin:10px 0; }
.ticketdrum-waitlist-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ticketdrum-waitlist-row input { max-width:240px; }

/* =========================================
   2. SHARED: forms, validation, modals
   ========================================= */

.form { clear:both; }
.form .row { display:flex; align-items:center; padding-bottom:20px; }
.form .row .title-wrapper { flex-basis:25%; margin-right:1%; text-align:right; font-size:16px; }
.form .row .input-wrapper { flex-basis:74%; position:relative; text-align:left; }
.form .buttons { text-align:center; }
.form.vertical .row, .form.vertical .row .title-wrapper, .form.vertical .row .input-wrapper { display:block; width:100%; margin:0; text-align:left; }
.form.vertical .row { padding-bottom:20px; }

.ticketdrum_input_error_highlight { border:1px solid #c82f1b !important; }
.ticketdrum_input_error_inline { position:absolute; z-index:10; margin-top:-7px; margin-left:7px; padding:0 5px; background:#c82f1b; border-radius:5px; color:#fff; font-size:12px; line-height:14px; }
.error-notice, .error_notice { margin:10px 0; padding:10px; background:#fff1f1; border:1px solid #d22; color:#d22; }

/* Modals (used by ticketdrum.js) */
.ticketdrum-modal { position:fixed; top:0; left:0; right:0; z-index:1500; }
.ticketdrum-modal .ticketdrum-modalmask { display:none; position:fixed; inset:0; z-index:500; background:#000; opacity:.5; }
.ticketdrum-modal .ticketdrum-modalwindow { display:none; position:relative; z-index:510; width:680px; max-width:96%; margin:60px auto; background:#f1f1f1; border-radius:3px; color:#333; }
.ticketdrum-modal .ticketdrum-modalcontents { padding:20px; max-height:90vh; overflow-y:auto; }
.ticketdrum-modal .ticketdrum-modalcontents .title { margin:0 0 5px; color:#666f77; font-weight:300; font-size:22px; line-height:22px; }
.ticketdrum-closemodal { position:absolute; top:-20px; right:10px; width:60px; height:20px; background:#f1f1f1; border-radius:3px 3px 0 0; color:#333; font-size:13px; line-height:20px; text-align:center; cursor:pointer; }

/* =========================================
   3. ADMIN
   ========================================= */

.ticketdrum-admin-wrap .ticketdrum-page-intro { margin:4px 0 0; color:#646970; max-width:60em; }
.ticketdrum-admin-wrap .ticketdrum-count { color:#646970; font-weight:400; }
.ticketdrum-admin-wrap .wp-list-table { margin-top:14px; }
.ticketdrum-admin-wrap .wp-list-table th { font-weight:600; }
.ticketdrum-admin-wrap .wp-list-table td { vertical-align:middle; }
.ticketdrum-admin-wrap .button.red, .ticketdrum-admin-wrap .ticketdrum-danger { background:#d63638; border-color:#d63638; color:#fff; }
.ticketdrum-admin-wrap .button.red:hover, .ticketdrum-admin-wrap .ticketdrum-danger:hover { background:#b32d2e; border-color:#b32d2e; color:#fff; }
.ticketdrum-admin-wrap a.red { color:#d63638; }
.ticketdrum-admin-wrap .nav-tab-wrapper { margin-bottom:18px; }
.ticketdrum-admin-wrap .form-table th { width:220px; }
.ticketdrum-admin-wrap .form-table input[type=text],
.ticketdrum-admin-wrap .form-table input[type=email],
.ticketdrum-admin-wrap .form-table input[type=number] { min-width:340px; max-width:100%; }
.ticketdrum-admin-wrap .form-table label { display:inline-block; margin:3px 0; }
.ticketdrum-admin-wrap .updated, .ticketdrum-admin-wrap .notice { margin:12px 0; }
.ticketdrum-admin-wrap .buttons { margin-top:10px; }
.ticketdrum_email_textarea { width:100%; min-height:400px; }

.ticketdrum-admin-wrap code, .ticketdrum-embed-code { padding:3px 8px; background:#f0f0f1; border:1px solid #dcdcde; border-radius:3px; font-size:12px; white-space:nowrap; user-select:all; }
.ticketdrum-embed-code { cursor:pointer; position:relative; }
.ticketdrum-embed-code:hover { border-color:#2271b1; }
.ticketdrum-embed-code.copied::after { content:'Copied!'; position:absolute; top:-26px; left:50%; transform:translateX(-50%); padding:3px 8px; background:#1d2327; border-radius:3px; color:#fff; font-size:11px; white-space:nowrap; }

.ticketdrum-pill { display:inline-block; padding:2px 10px; border-radius:99px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.ticketdrum-pill.paid, .ticketdrum-pill.active { background:#edfaef; border:1px solid #b8e6bf; color:#008a20; }
.ticketdrum-pill.pending, .ticketdrum-pill.draft { background:#fcf9e8; border:1px solid #f5e6ab; color:#996800; }
.ticketdrum-pill.archived, .ticketdrum-pill.inactive, .ticketdrum-pill.refunded { background:#f0f0f1; border:1px solid #dcdcde; color:#646970; }

/* Dashboard */
.ticketdrum-dash-tiles { display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 8px; }
.ticketdrum-dash-tile { min-width:150px; padding:18px 22px 14px; background:#fff; border:1px solid #dcdcde; border-radius:6px; box-shadow:0 1px 1px rgba(0,0,0,.04); }
.ticketdrum-dash-tile .num { display:block; color:#1d2327; font-size:28px; font-weight:600; line-height:1.1; }
.ticketdrum-dash-tile .label { display:block; margin-top:6px; color:#646970; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.ticketdrum-dash-chart-wrap { max-width:900px; margin:18px 0 30px; padding:18px 22px 26px; background:#fff; border:1px solid #dcdcde; border-radius:6px; }
.ticketdrum-dash-chart { display:flex; align-items:flex-end; gap:4px; height:140px; margin-top:10px; }
.ticketdrum-dash-chart .bar-slot { position:relative; display:flex; flex:1; flex-direction:column; justify-content:flex-end; height:100%; }
.ticketdrum-dash-chart .bar { background:#1e7a4a; border-radius:2px 2px 0 0; transition:background .15s; }
.ticketdrum-dash-chart .bar-slot:hover .bar { background:#ff5a3c; }
.ticketdrum-dash-chart .bar-label { position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); color:#646970; font-size:9px; white-space:nowrap; }

/* Check-in */
.ticketdrum-checkin-input { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:16px 0; }
.ticketdrum-checkin-input input { width:280px; padding:10px 14px; font-size:20px; text-transform:uppercase; }
#ticketdrum_checkin_result > div { margin:10px 0 18px; padding:16px 20px; border-radius:6px; font-size:18px; font-weight:600; }
.ticketdrum-checkin-ok { background:#edfaef; border:2px solid #008a20; color:#008a20; }
.ticketdrum-checkin-dupe { background:#fcf9e8; border:2px solid #996800; color:#996800; }
.ticketdrum-checkin-bad { background:#fcf0f1; border:2px solid #d63638; color:#d63638; }
.ticketdrum-checkin-log-wrap { max-width:760px; overflow-x:auto; }
#ticketdrum_checkin_log td, #ticketdrum_checkin_log th { overflow-wrap:normal; word-break:normal; }
#ticketdrum_checkin_log .ticketdrum-pill, .ticketdrum-promocodes-table .ticketdrum-pill { white-space:nowrap; }
.ticketdrum-promocodes-table td:first-child { white-space:nowrap; }
@media screen and (max-width:600px) {
	#ticketdrum_checkin_log .ticketdrum-checkin-event { display:none; } /* the result banner above names the event */
	#ticketdrum_checkin_log td, #ticketdrum_checkin_log th { padding:8px 6px; }
}

/* Order details */
.ticketdrum-order-cols { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:20px; align-items:start; max-width:1100px; margin-top:10px; }
.ticketdrum-order-panel { background:#fff; border:1px solid #dcdcde; border-radius:6px; padding:4px 22px 18px; }
.ticketdrum-order-panel h2 { font-size:15px; margin:16px 0 10px; }
.ticketdrum-order-table { width:100%; border-collapse:collapse; }
.ticketdrum-order-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#646970; padding:6px 0; border-bottom:2px solid #1d2327; }
.ticketdrum-order-table td { padding:10px 0; border-bottom:1px solid #f0f0f1; vertical-align:top; }
.ticketdrum-order-table .r { text-align:right; }
.ticketdrum-order-table tfoot td { border-bottom:none; padding:5px 0; color:#646970; }
.ticketdrum-order-table tfoot .ticketdrum-order-total td { border-top:2px solid #1d2327; font-weight:700; font-size:14px; color:#1d2327; padding-top:9px; }
.ticketdrum-order-attendee { margin-top:6px; padding:8px 10px; background:#f6f7f7; border-radius:4px; font-size:12px; color:#50575e; }
.ticketdrum-order-meta { width:100%; border-collapse:collapse; }
.ticketdrum-order-meta th { text-align:left; width:110px; padding:7px 0; color:#646970; font-weight:600; vertical-align:top; }
.ticketdrum-order-meta td { padding:7px 0; }
@media (max-width:1100px){ .ticketdrum-order-cols { grid-template-columns:1fr; } }

/* Custom checkout field editor */
.formeditorwrapper { display:block; max-width:860px; margin:0; padding:2px 16px 14px; background:#fff; border:1px solid #dcdcde; border-radius:4px; }
.formeditorwrapper .formfield { display:flex; gap:12px; align-items:flex-start; margin:0; padding:14px 0; list-style:none; background:none; border:0; border-bottom:1px solid #f0f0f1; }
.formeditorwrapper .formfield .handle { flex:0 0 auto; margin-top:6px; color:#a7aaad; cursor:grab; }
.formeditorwrapper .formfield .type { flex:0 0 64px; margin-top:3px; padding:6px 0; background:#f0f0f1; border-radius:3px; color:#646970; font-size:10px; letter-spacing:.05em; text-align:center; text-transform:uppercase; }
.formeditorwrapper .formfield .details_wrapper { flex:1 1 auto; min-width:0; }
.formeditorwrapper .formfield .details_wrapper input[type=text] { width:100%; min-width:0; max-width:none; box-sizing:border-box; }
.formeditorwrapper .formfield .extra-field-info { margin-top:8px; color:#646970; font-size:12px; }
.formeditorwrapper .formfield .extra-field-info p { margin:0; }
.formeditorwrapper .formfield .extra-field-info input,
.formeditorwrapper .formfield .extra-field-info textarea { display:block; width:100%; max-width:320px; min-width:0; margin-top:2px; box-sizing:border-box; }
.formeditorwrapper .formfield input[name=fieldclean] { flex:0 0 170px; min-width:0; max-width:170px; box-sizing:border-box; }
.formeditorwrapper .formfield .is_required { flex:0 0 auto; width:auto; margin:6px 0 0; white-space:nowrap; }
.formeditorwrapper .formfield .right { flex:0 0 auto; margin-left:auto; text-align:right; }
.formeditorwrapper .add-formfield { display:block; width:100%; margin:14px 0 0; padding:11px; box-sizing:border-box; background:#fff; border:1.5px dashed #a7aaad; border-radius:4px; box-shadow:none; color:#2271b1; font-weight:600; text-align:center; cursor:pointer; float:none; }
.formeditorwrapper .add-formfield:hover { background:#f6f9fc; border-color:#2271b1; color:#135e96; }

/* Add-field chooser popup */
#add-field-wrapper { display:none; }
#add-field-mask { position:fixed; inset:0; z-index:100; background:rgba(55,55,55,.5); }
#add-field-content { position:fixed; top:80px; left:50%; transform:translateX(-50%); z-index:105; width:480px; max-width:92%; padding:24px 28px; background:#fff; border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.25); }
#add-field-content h4 { margin:0 0 4px; font-size:16px; }
#add-field-content > p { margin:0 0 16px; color:#646970; }
.field-type-selector { display:flex; gap:12px; align-items:center; margin-bottom:10px; padding:12px 14px; border:1px solid #dcdcde; border-radius:4px; }
.field-type-selector .field-type-title { flex:0 0 90px; font-weight:600; color:#1d2327; }
.field-type-selector .field-type-description { flex:1; color:#646970; }
.field-type-selector .field-type-add-button { flex:0 0 auto; }

/* =========================================
   Responsive (frontend tables)
   ========================================= */

@media screen and (max-width: 767px) {
	table.ticketdrum_table th, table.ticketdrum_table td { padding:10px; }
	table.ticketdrum_table, table.ticketdrum_table thead, table.ticketdrum_table tbody,
	table.ticketdrum_table tfoot, table.ticketdrum_table tr, table.ticketdrum_table th, table.ticketdrum_table td {
		display:block; width:100%; border:0; background:none; box-sizing:border-box;
	}
	table.ticketdrum_table thead { display:none; }
	table.ticketdrum_table tbody tr { margin-bottom:20px; padding:5px; border:1px solid #ccc; border-top:5px solid #777; }
	table.ticketdrum_table tbody tr:hover td { background:none; }
	table.ticketdrum_table tbody .ticket-quantity-selector-td { display:inline-block; width:40%; text-align:left; }
	table.ticketdrum_table tbody .amount { display:inline-block; float:right; width:40%; text-align:right; }
	table.ticketdrum_table tfoot tr { display:flex; justify-content:space-between; width:100%; }
	table.ticketdrum_table tfoot th, table.ticketdrum_table tfoot th.amount { width:auto; }

	#ticketdrum_checkout_form { padding:0; }
	.form .row { flex-direction:column; }
	.form .row .title-wrapper, .form .row .input-wrapper { width:100%; text-align:left; }
}