/* ── KÁRTYÁK ──────────────────────────────────────────────────── */
.card {
    background:    white;
    border-radius: var(--radius-lg);
    padding:       32px;
    margin-bottom: 28px;
    box-shadow:    var(--shadow-sm);
    border:        1px solid rgba(255,255,255,0.9);
    position:      relative;
    overflow:      hidden;
    transition:    var(--transition);
}

.card::before {
    content:   '';
    position:  absolute;
    top: 0; left: 0;
    width:     5px;
    height:    100%;
    background: linear-gradient(180deg, var(--be-navy) 0%, var(--be-red) 100%);
}

.card:hover {
    box-shadow: var(--shadow);
    transform:  translateY(-2px);
}

.card-header {
    display:       flex;
    align-items:   center;
    gap:           16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-light);
}

.card-icon {
    width:         52px;
    height:        52px;
    background:    linear-gradient(135deg, var(--be-navy) 0%, var(--primary) 100%);
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         white;
    font-size:     22px;
    flex-shrink:   0;
}

.card-title {
    font-size:   22px;
    font-weight: 700;
    color:       var(--dark);
}

/* ── FORM ELEMEK ──────────────────────────────────────────────── */
.form-group   { margin-bottom: 28px; }

.form-label {
    display:       block;
    font-weight:   700;
    font-size:     15px;
    color:         var(--dark);
    margin-bottom: 10px;
}

.form-control {
    width:         100%;
    padding:       16px 20px;
    border:        2px solid var(--gray-light);
    border-radius: var(--radius-sm);
    font-size:     16px;
    font-family:   var(--font-main);
    color:         var(--dark);
    background:    var(--light);
    transition:    var(--transition);
}

.form-control:focus {
    outline:      none;
    border-color: var(--be-navy);
    background:   white;
    box-shadow:   0 0 0 3px rgba(11,31,58,0.08);
}

.input-with-icon { position: relative; }

.input-with-icon i {
    position:  absolute;
    left:      18px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--gray);
    font-size: 16px;
}

.input-with-icon input { padding-left: 50px; }

.unit {
    position:  absolute;
    right:     18px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--gray);
    font-weight: 600;
    font-size: 15px;
}

/* ── OPCIÓ KÁRTYÁK ────────────────────────────────────────────── */
.options-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   16px;
    margin-top:            12px;
}

.option-card {
    border:        2px solid var(--gray-light);
    border-radius: var(--radius);
    padding:       24px 18px;
    text-align:    center;
    cursor:        pointer;
    transition:    var(--transition);
    background:    white;
    min-height:    130px;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    justify-content: center;
}

.option-card:hover {
    border-color: var(--primary-light);
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-sm);
}

.option-card.active {
    border-color: var(--be-navy);
    background:   rgba(11,31,58,0.04);
    box-shadow:   0 4px 16px rgba(11,31,58,0.12);
}

.option-icon {
    font-size:     38px;
    margin-bottom: 12px;
    display:       block;
    line-height:   1;
}

.option-title {
    font-weight: 700;
    font-size:   15px;
    color:       var(--dark);
    margin-bottom: 4px;
}

.option-subtitle {
    font-size:   13px;
    color:       var(--gray);
    line-height: 1.4;
}

/* ── NAVIGÁCIÓ GOMBOK ─────────────────────────────────────────── */
.navigation {
    display:       flex;
    gap:           16px;
    margin-top:    40px;
    padding-top:   28px;
    border-top:    1px solid var(--gray-light);
}

.navigation .btn { flex: 1; }

/* ── GOMBOK ───────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         16px 32px;
    border-radius:   var(--radius);
    border:          none;
    font-size:       16px;
    font-weight:     700;
    font-family:     var(--font-main);
    cursor:          pointer;
    transition:      var(--transition);
    text-decoration: none;
    position:        relative;
    overflow:        hidden;
    letter-spacing:  0.3px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--be-navy) 0%, var(--primary) 100%);
    color:      white;
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 28px rgba(11,31,58,0.35);
}

.btn-danger {
    background: var(--be-red);
    color:      white;
    box-shadow: var(--shadow-red);
}

.btn-danger:hover {
    background: var(--be-red-hover);
    transform:  translateY(-2px);
}

.btn-secondary {
    background: white;
    color:      var(--dark);
    border:     2px solid var(--gray-light);
}

.btn-secondary:hover {
    background:   var(--light);
    border-color: var(--gray);
}

.btn-full { width: 100%; }

/* ── HELYISÉG KÁRTYÁK ─────────────────────────────────────────── */
.rooms-container {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap:                   22px;
    margin-bottom:         36px;
}

.room-card {
    background:    white;
    border-radius: var(--radius);
    border:        1px solid var(--gray-light);
    overflow:      hidden;
    transition:    var(--transition);
    box-shadow:    var(--shadow-sm);
}

.room-card:hover {
    border-color: rgba(11,31,58,0.2);
    box-shadow:   var(--shadow);
}

.room-header {
    background:    var(--light);
    padding:       20px 22px;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    border-bottom: 1px solid var(--gray-light);
}

.room-title {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex:        1;
    min-width:   0;
}

.room-icon {
    width:         50px;
    height:        50px;
    border-radius: var(--radius-sm);
    background:    linear-gradient(135deg, var(--be-navy) 0%, var(--primary) 100%);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     22px;
    flex-shrink:   0;
}

.room-name {
    border:     none;
    background: transparent;
    font-weight: 700;
    color:      var(--dark);
    font-size:  18px;
    width:      100%;
    padding:    4px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
    font-family: var(--font-main);
}

.room-name:focus {
    outline:           none;
    border-bottom-color: var(--be-navy);
}

.room-cost {
    font-size:   13px;
    color:       var(--gray);
    font-weight: 500;
    margin-top:  2px;
}

.room-actions {
    display:     flex;
    gap:         10px;
    flex-shrink: 0;
}

.room-btn {
    width:         40px;
    height:        40px;
    border-radius: var(--radius-sm);
    border:        none;
    background:    white;
    color:         var(--dark);
    font-size:     16px;
    transition:    var(--transition);
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    var(--shadow-sm);
}

.room-btn.delete:hover { background: var(--danger); color: white; }
.room-btn.add:hover    { background: var(--be-navy); color: white; }

/* ── KIÁLLÁSOK ────────────────────────────────────────────────── */
.fixtures-list { padding: 18px 20px; }

.fixture-empty {
    text-align: center;
    color:      var(--gray);
    font-size:  14px;
    padding:    16px 0;
    font-style: italic;
}

.fixture-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 0;
    border-bottom:   1px solid var(--gray-light);
    gap:             12px;
}

.fixture-item:last-child { border-bottom: none; }

.fixture-info {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex:        1;
    min-width:   0;
}

.fixture-icon {
    width:         42px;
    height:        42px;
    border-radius: var(--radius-sm);
    background:    var(--light);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     20px;
    flex-shrink:   0;
}

.fixture-name  { font-weight: 600; font-size: 15px; color: var(--dark); }
.fixture-price { font-size: 13px; color: var(--gray); margin-top: 2px; }

.fixture-controls {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

.counter-btn {
    width:         36px;
    height:        36px;
    border-radius: var(--radius-sm);
    border:        2px solid var(--gray-light);
    background:    white;
    color:         var(--dark);
    font-weight:   700;
    font-size:     18px;
    transition:    var(--transition);
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.counter-btn:hover:not(:disabled) {
    border-color: var(--be-navy);
    color:        var(--be-navy);
    background:   rgba(11,31,58,0.05);
}

.counter-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.counter-value {
    min-width:   36px;
    text-align:  center;
    font-weight: 700;
    font-size:   18px;
}

.delete-btn {
    width:         36px;
    height:        36px;
    border-radius: var(--radius-sm);
    border:        2px solid var(--danger);
    background:    white;
    color:         var(--danger);
    font-size:     15px;
    transition:    var(--transition);
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.delete-btn:hover { background: var(--danger); color: white; }

.extra-badge {
    background:   rgba(200,16,46,0.08);
    color:        var(--be-red);
    padding:      5px 12px;
    border-radius: 20px;
    font-size:    13px;
    font-weight:  700;
    white-space:  nowrap;
}

/* ── HELYISÉG HOZZÁADÁS GOMB ──────────────────────────────────── */
.btn-add-room {
    width:         100%;
    padding:       22px;
    background:    white;
    color:         var(--be-navy);
    border:        3px dashed var(--be-navy);
    border-radius: var(--radius);
    font-size:     16px;
    font-weight:   700;
    margin-bottom: 32px;
    cursor:        pointer;
    transition:    var(--transition);
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           12px;
    font-family:   var(--font-main);
}

.btn-add-room:hover {
    background:    rgba(11,31,58,0.04);
    border-style:  solid;
    transform:     translateY(-1px);
}

/* ── EXTRA KÁRTYÁK ────────────────────────────────────────────── */
.extras-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   20px;
    margin-bottom:         36px;
}

.extra-card {
    background:    white;
    border-radius: var(--radius);
    padding:       24px;
    border:        1px solid var(--gray-light);
    transition:    var(--transition);
    box-shadow:    var(--shadow-sm);
}

.extra-card:hover { box-shadow: var(--shadow); }

.extra-card--active {
    border-color: var(--be-navy);
    box-shadow:   0 4px 16px rgba(11,31,58,0.12);
}

.extra-header {
    display:       flex;
    align-items:   center;
    gap:           16px;
    margin-bottom: 20px;
}

.extra-icon {
    width:         54px;
    height:        54px;
    border-radius: var(--radius-sm);
    background:    linear-gradient(135deg, var(--be-navy) 0%, var(--primary) 100%);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         white;
    font-size:     24px;
    flex-shrink:   0;
}

.extra-title     { font-weight: 700; font-size: 17px; color: var(--dark); }
.extra-desc      { font-size: 13px; color: var(--gray); margin-top: 2px; }
.extra-unit-price{ font-size: 13px; color: var(--primary); font-weight: 700; margin-left: auto; white-space: nowrap; }

/* ── INFO / WARNING KÁRTYÁK ───────────────────────────────────── */
.timeline-card {
    background:   rgba(243,156,18,0.08);
    border-left:  5px solid var(--warning);
    padding:      24px;
    border-radius: var(--radius);
    margin-bottom: 28px;
    display:       flex;
    gap:           16px;
    align-items:   flex-start;
}

.warning-card {
    background:   rgba(231,76,60,0.08);
    border-left:  5px solid var(--danger);
    padding:      24px;
    border-radius: var(--radius);
    margin-bottom: 28px;
    display:       flex;
    gap:           16px;
    align-items:   flex-start;
}

.info-card {
    background:   rgba(67,97,238,0.07);
    border-left:  5px solid var(--primary);
    padding:      24px;
    border-radius: var(--radius);
    margin-bottom: 28px;
    display:       flex;
    gap:           16px;
    align-items:   flex-start;
}

.info-card i, .warning-card i, .timeline-card i {
    font-size:  24px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── DROPDOWN ─────────────────────────────────────────────────── */
.dropdown-container { position: relative; }

.dropdown-toggle {
    width:         100%;
    padding:       14px 18px;
    border:        2px solid var(--be-navy);
    border-radius: var(--radius-sm);
    background:    white;
    color:         var(--be-navy);
    font-weight:   600;
    font-size:     15px;
    cursor:        pointer;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    transition:    var(--transition);
    font-family:   var(--font-main);
}

.dropdown-toggle:hover { background: var(--light); }

.dropdown-menu {
    position:     absolute;
    top:          calc(100% + 4px);
    left: 0; right: 0;
    background:   white;
    border:       2px solid var(--gray-light);
    border-radius: var(--radius-sm);
    box-shadow:   var(--shadow-lg);
    z-index:      1000;
    max-height:   280px;
    overflow-y:   auto;
    display:      none;
    animation:    slideDown 0.2s ease-out;
}

.dropdown-menu.show { display: block; }

.dropdown-item {
    padding:     14px 18px;
    display:     flex;
    align-items: center;
    gap:         14px;
    cursor:      pointer;
    transition:  background 0.15s;
    border-bottom: 1px solid var(--gray-light);
}

.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover      { background: var(--light); }
.dropdown-item .icon      { font-size: 22px; width: 36px; text-align: center; }
.dropdown-item .name      { font-weight: 600; flex: 1; color: var(--dark); }
.dropdown-item .price     { color: var(--primary); font-weight: 700; font-size: 13px; }

/* ── PANEL TECH FIGYELMEZTETÉS ────────────────────────────────── */
#panelTechWarning {
    display: none;
}

/* ── MOBILBARÁT ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .card            { padding: 20px 18px; }
    .rooms-container { grid-template-columns: 1fr; }
    .extras-grid     { grid-template-columns: 1fr; }
    .options-grid    { grid-template-columns: repeat(2, 1fr); }
    .navigation      { flex-direction: column; }
    .navigation .btn { width: 100%; }
    .fixture-controls{ gap: 8px; }
    .extra-unit-price{ display: none; }
}