/* Modal styles */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility 0s .25s
}

.modal.open {
    visibility: visible;
    opacity: 1;
    transition: opacity .25s ease
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity .25s ease
}

.modal.open .modal-backdrop {
    opacity: 1
}

.modal-content {
    position: relative;
    max-width: 420px;
    margin: 6vh auto;
    background: #fff;
    color: #333;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform .26s cubic-bezier(.2, .9, .2, 1), opacity .2s ease;
    opacity: 0;
}

.modal.open .modal-content {
    transform: translateY(0);
    opacity: 1
}

.modal-close {
    position: absolute;
    right: 12px;
    top: 12px;
    border: none;
    background: transparent;
    color: inherit;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
    padding: 6px;
    margin: 0;
    transition: background .12s ease, transform .06s ease;
}

.modal-close:hover{background:rgba(0,0,0,0.06);transform:scale(1.03)}

/* Header / Body / Footer layout */
.modal-header{padding:18px 20px;background:linear-gradient(90deg,#5b21b6,#7c3aed);color:#fff}
.modal-header h2{margin:0;font-size:18px;font-weight:600}
.modal-body{padding:20px}
.modal-footer{padding:12px 16px;background: #f6f7fb;display:flex;gap:8px;justify-content:flex-end}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:8px;border:1px solid transparent;font-size:14px;cursor:pointer;transition:transform .06s ease,box-shadow .12s ease}
.btn:active{transform:translateY(1px)}
.btn-secondary{background:#fff;color:#374151;border-color:#e6e7eb}
.btn-secondary:hover{background:#f8fafc}
.submit-btn{min-width:140px;padding:10px 16px;border-radius:10px;background:linear-gradient(90deg,#6d28d9,#9333ea);color:#fff;border:none;font-weight:600}
.submit-btn:hover{filter:brightness(.98);box-shadow:0 6px 18px rgba(99,102,241,.12)}

/* Variant headers */
.modal--danger .modal-header{background:linear-gradient(90deg,#ef4444,#dc2626);color:#fff}
.modal--success .modal-header{background:linear-gradient(90deg,#10b981,#059669);color:#fff}
.modal--info .modal-header{background:linear-gradient(90deg,#0284c7,#06b6d4);color:#fff}
.modal--accent .modal-header{background:linear-gradient(90deg,#7c3aed,#4b1dff);color:#fff}

/* small screens */
@media (max-width:520px){.modal-content{margin:6vh 12px;max-width:calc(100% - 24px)}.modal-footer{padding:12px}}

.modal-info {
    margin-bottom: 16px;
    font-size: 13px;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.modal-info .addr,
.modal-info .time {
    display: block
}

.form-row {
    margin-bottom: 12px
}

.form-row label {
    font-size: 14px;
    margin-bottom: 6px;
    color: #222
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"] {
padding: 24px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 8px;
}

.quantity-row .quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px
}

.quantity-controls button {
    width: 36px;
    height: 36px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    font-weight: 600;
    transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.quantity-controls button:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
    transform: translateY(-1px);
}

.quantity-controls button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.quantity-controls input[type="number"] {
    width: 64px;
    text-align: center;

}

.unit-price,
.total-price {
    font-weight: 600;
    font-size: 16px
}

.submit-btn {
    width: 100%;
    padding: 14px 18px;
    border: none;
    background: linear-gradient(90deg, #6d28d9, #9333ea);
    color: #fff;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer
}

.submit-btn:active {
    transform: translateY(1px)
}

/* Floating label styles */
.field {
    position: relative
}

.field input {
    width: 100%;
    padding: 14px 10px 10px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff
}

.field input::placeholder {
    color: transparent
}

.field label {
    position: absolute;
    left: 12px;
    top: 16px;
    pointer-events: auto;
    background: transparent;
    padding: 0 0;
      color: lighten(#7c3aed, 20%);
    background: #fff;
    transition: transform .18s ease, font-size .18s ease, top .18s ease
}

.field input:focus+label,
.field input:not(:placeholder-shown)+label {
    transform: translateY(-23px);
    font-size: 12px;
   color: #7c3aed;
 
}

.inline-label {
    font-size: 13px;
    color: #666;
    margin-left: 8px
}

.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap
}