:root {
    --kt-green: #1a9c3b;
    --kt-green-light: #00a62d;
    --kt-green-hover: #147a2e;
    --kt-orange: #ff6b35;
    --kt-border: #8fd19e;
    --kt-text: #555;
    --kt-bg-gray: #f9fbf9;
}

/* ============================================================
   1. FOGLALTSÁGI TÁBLÁZAT (200 NAPOS NAPTÁR)
   ============================================================ */
.kt-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 30px 0;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.kt-main-availability-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', sans-serif;
    min-width: 2000px;
}

.kt-main-availability-table th {
    background-color: #f8f9fa;
    color: #333;
    padding: 10px;
    border: 1px solid #dee2e6;
    font-size: 11px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.kt-cat-name {
    background-color: #ffffff !important;
    font-weight: bold;
    color: var(--kt-green);
    padding: 12px 15px;
    border: 1px solid #dee2e6;
    position: sticky;
    left: 0;
    z-index: 11;
    min-width: 180px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.kt-status-cell {
    padding: 10px;
    text-align: center;
    border: 1px solid #dee2e6;
    font-size: 11px;
    min-width: 65px;
}

.kt-status-cell.free { background-color: var(--kt-green) !important; color: white !important; }
.kt-status-cell.full { background-color: #d63031 !important; color: white !important; }
.kt-status-cell.closed { background-color: #f1f3f5 !important; color: #adb5bd !important; font-style: italic; }

/* ============================================================
   2. FOGLALÁSI ŰRLAP (STEPPER & FORM)
   ============================================================ */
.kt-v3-card {
    background: #fff;
    border: 3px solid var(--kt-green);
    border-radius: 40px; 
    padding: 30px;
    max-width: 620px;
    margin: 20px auto;
    font-family: 'Segoe UI', sans-serif;
}

.kt-stepper { display: flex; justify-content: space-around; margin-bottom: 15px; }
.kt-step { text-align: center; opacity: 0.3; transition: 0.3s; }
.kt-step.active { opacity: 1; }
.kt-step .step-num {
    background: var(--kt-green); color: white; width: 24px; height: 24px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 12px;
}
.kt-step .step-label { display: block; font-size: 10px; font-weight: bold; margin-top: 5px; text-transform: uppercase; }

.kt-v3-row { display: flex; align-items: center; margin-bottom: 15px; gap: 10px; }
.kt-v3-main-label { width: 110px; font-weight: bold; font-size: 12px; color: var(--kt-text); flex-shrink: 0; }

.kt-v3-field-wrap, .kt-v3-qty-box, .kt-v3-select-wrap {
    border: 1px solid var(--kt-border);
    border-radius: 25px;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    background: #fff;
    flex-grow: 1;
}

.kt-v3-qty-container { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.kt-v3-qty-box { width: 100%; max-width: 320px; justify-content: flex-start; }
.kt-v3-qty-box input { width: 45px; border:none!important; text-align: center; font-weight: bold; background: transparent; }
.kt-v3-qty-box label { font-size: 13px; margin-left: 10px; flex-grow: 1; display: flex; align-items: center; gap: 6px; }

/* ============================================================
   3. INFO TOOLTIP DESIGN (AZ ÚJ RÉSZ)
   ============================================================ */
.kt-v3-info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: var(--kt-green);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    cursor: help;
    position: relative;
    transition: background-color 0.2s;
}

.kt-v3-info-tip:hover {
    background-color: var(--kt-orange);
}

/* Tooltip buborék */
.kt-v3-info-tip::after {
    content: attr(title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-weight: normal;
}

/* Kis nyíl a buborék alatt */
.kt-v3-info-tip::before {
    content: "";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

.kt-v3-info-tip:hover::after,
.kt-v3-info-tip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   4. EGYÉB FORM ELEMEK
   ============================================================ */
.kt-v3-input-group { display: flex; gap: 10px; flex-grow: 1; }
.kt-v3-icon-cal { margin-left: auto; color: var(--kt-green); cursor: pointer; }

.kt-v3-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.full-width { grid-column: span 2; }
.kt-v3-field-wrap input, .kt-v3-field-wrap textarea {
    border: none !important; width: 100%; font-size: 14px; background: transparent; outline: none;
}

.kt-v3-confirm-summary { 
    background: var(--kt-bg-gray); border-radius: 20px; padding: 20px; 
    margin-bottom: 25px; border: 1px dashed var(--kt-border);
}

.kt-v3-pin-row { display: flex; align-items: center; gap: 15px; margin-top: 25px; }
.kt-v3-pin-input { border: 2px solid var(--kt-green); border-radius: 15px; padding: 10px; display: flex; align-items: center; gap: 10px; }
.kt-v3-pin-input input { border: none !important; width: 100px; font-size: 22px; font-weight: bold; text-align: center; letter-spacing: 4px; }

.kt-v3-submit-btn {
    background: var(--kt-green); color: white; border: none; border-radius: 30px;
    padding: 12px 25px; font-weight: bold; cursor: pointer; width: 100%; transition: 0.3s;
}
.kt-v3-submit-btn:hover { background: var(--kt-green-hover); }
.kt-v3-submit-btn.orange { background: var(--kt-orange); }
.green-btn { background: var(--kt-green-light) !important; width: auto !important; }

.kt-v3-price-wrapper { text-align: center; margin: 20px 0; padding-top: 15px; border-top: 1px dashed #eee; }
.kt-v3-price-amount { font-size: 28px; font-weight: bold; color: #333; }

.kt-pay-choice {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border: 2px solid #eee;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kt-pay-choice:has(input:checked) {
    border-color: var(--kt-green);
    background-color: #f8fff9;
}

.kt-payment-methods {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.pay-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.pay-btn.active {
    background-color: var(--kt-green);
    color: white;
    border-color: var(--kt-green-hover);
}

#date-error-msg {
    background: #fff5f5;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ffc1c1;
    margin-bottom: 15px;
}

.kt-alternative-offers { margin-top: 20px; text-align: center; }
.kt-alt-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-top: 15px; 
}
.kt-alt-card { 
    background: #fff; border: 1px solid var(--kt-orange); border-radius: 10px; padding: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.kt-alt-btn { 
    display: block; background: var(--kt-green); color: #fff; text-decoration: none; 
    padding: 8px; border-radius: 5px; font-size: 12px; font-weight: bold;
}