* { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; background: #f8f6f0; color: #1e2b2f; padding: 2rem 1.5rem; }
        .container { max-width: 1400px; margin: 0 auto; }
        h1 {
            font-size: 2.2rem;
            font-weight: 600;
            letter-spacing: 1px;
            border-left: 6px solid #d4a373;
            padding-left: 1rem;
            margin-bottom: 1.2rem;
            color: #2d3e42;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .dcxtlogo{
	float: left;
	width: 100%;
	text-align: center;
	background:#fff;
	padding:10px 0px;
	margin-bottom:20px;
}
.dcxtlogo img{
	width: 100%;
	max-width:247px;
}
        .time-selector {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 1rem;
            font-weight: 400;
            background: #f0ebe2;
            padding: 0.3rem 1rem 0.3rem 1.2rem;
            border-radius: 60px;
            border: 1px solid #d9c9b2;
            flex-wrap: wrap;
        }
        .time-selector label {
            color: #4a3f36;
        }
        .time-selector select {
            border: none;
            background: white;
            padding: 0.4rem 0.8rem;
            border-radius: 40px;
            font-size: 0.95rem;
            outline: none;
            border: 1px solid #d4cabc;
            color: #1e2b2f;
            cursor: pointer;
        }
        .time-selector select:focus {
            border-color: #b5875e;
        }
        .time-selector .booking-hint {
            background: #d4a373;
            color: white;
            padding: 0.2rem 1rem;
            border-radius: 40px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        .week-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.8rem;
            margin-bottom: 3rem;
        }
        .day-card {
            background: white;
            border-radius: 28px;
            padding: 1.4rem 1.2rem 1.2rem;
            box-shadow: 0 8px 20px rgba(0,0,0,0.03), 0 4px 10px rgba(0,0,0,0.02);
            transition: 0.2s;
            border: 1px solid #edeae3;
            display: flex;
            flex-direction: column;
        }
        .day-card.disabled {
            opacity: 0.5;
            pointer-events: none;
            filter: grayscale(0.3);
        }
        .day-card.disabled .day-title span {
            background: #a09080;
        }
        .day-card:hover {
            border-color: #d9c9b2;
            box-shadow: 0 12px 24px rgba(0,0,0,0.05);
        }
        .day-title {
            font-weight: 600;
            font-size: 1.3rem;
            color: #4a3f36;
            padding-bottom: 0.5rem;
            border-bottom: 2px dotted #e5ddd2;
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .day-title span {
            background: #d4a373;
            color: white;
            font-size: 0.7rem;
            border-radius: 40px;
            padding: 0.1rem 0.8rem;
            margin-left: auto;
        }
        .day-title .day-status {
            font-size: 0.7rem;
            background: #b0a090;
            padding: 0.1rem 0.8rem;
            border-radius: 40px;
            color: white;
        }
        .day-title .day-status.bookable {
            background: #d4a373;
        }
                    .period-section {
            margin-bottom: 0.8rem;
        }
        .period-section:last-child {
            margin-bottom: 0;
        }
        .period-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.6rem;
        }
        .period-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: #7a6a58;
            padding: 0.3rem 0.8rem;
            background: #f5f0e9;
            border-radius: 20px;
        }
        .period-add-btn {
            background: #b8a391;
            border: none;
            color: #fff;
            font-weight: 500;
            padding: 0.25rem 1rem;
            border-radius: 30px;
            cursor: pointer;
            font-size: 0.85rem;
            transition: 0.2s;
        }
        .period-add-btn:hover {
            background: #9e8a78;
        }
        .period-add-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #b0a090;
        }
        .period-add-btn.in-cart {
            background: #6b7b5a;
        }

        .dish-list {
            list-style: none;
            flex: 1;
        }
        .dish-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.6rem 0.1rem;
            border-bottom: 1px solid #f0ebe2;
            font-size: 0.95rem;
            gap: 0.5rem;
        }
        .dish-item:last-child {
            border-bottom: none;
        }
        .dish-name {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            flex: 1;
            min-width: 0;
        }
        .dish-thumb {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            flex-shrink: 0;
            overflow: hidden;
            border: 1px solid #e0d6c8;
            background: #f0ebe2;
        }
        .dish-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .dish-text {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .dish-text .name {
            font-weight: 500;
            color: #2d3e42;
        }
        .dish-text .desc {
            font-size: 0.75rem;
            color: #9a8a78;
        }
        .cart-section {
            background: #ffffffd9;
            backdrop-filter: blur(4px);
            border-radius: 48px;
            padding: 1.6rem 2rem;
            box-shadow: 0 8px 30px rgba(0,0,0,0.04);
            border: 1px solid #e8dfd2;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            margin-top: 1rem;
        }
        .cart-items {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 0.7rem;
            flex: 2;
        }
        .cart-tag {
            background: #ede3d6;
            border-radius: 16px;
            padding: 0.8rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            font-size: 0.9rem;
            min-width: 200px;
        }
        .cart-tag .package-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .cart-tag .package-icon {
            font-size: 1.2rem;
        }
        .cart-tag .package-name {
            font-weight: 600;
            color: #2d3e42;
            flex: 1;
        }
        .cart-tag .package-dishes {
            font-size: 0.8rem;
            color: #7a6a58;
            padding-left: 1.7rem;
        }
        .cart-tag .remove-item {
            background: none;
            border: none;
            font-size: 1rem;
            cursor: pointer;
            color: #7a6652;
            padding: 0 0.3rem;
            transition: color 0.2s;
        }
        .cart-tag .remove-item:hover {
            color: #b13e3e;
        }
        .cart-actions {
            display: flex;
            gap: 0.8rem;
            align-items: center;
            flex-wrap: wrap;
        }
        .btn { border: none; background: #d4a373; padding: 0.6rem 1.5rem; border-radius: 60px; font-weight: 500; color: white; font-size: 0.95rem; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 8px rgba(0,0,0,0.02); border: 1px solid #c5915e; }
        .btn-outline { background: transparent; color: #4f3f30; border: 1px solid #cbbaa6; }
        .btn:hover:not(:disabled) {
            background: #c28f5a;
            transform: scale(0.97);
        }
        .btn:disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        .btn-outline:hover:not(:disabled) {
            background: #f0e7db;
        }
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 999; }
        .modal { background: white; max-width: 420px; width: 90%; padding: 2.2rem 2rem 1.8rem; border-radius: 48px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; gap: 1.2rem; }
        .modal h2 {
            font-weight: 500;
            font-size: 1.6rem;
            color: #2d3e42;
        }
        .modal .booking-summary {
            background: #f5f0e9;
            padding: 0.8rem 1.2rem;
            border-radius: 30px;
            font-size: 0.95rem;
            color: #3d4e4a;
        }
        .modal .booking-summary .highlight {
            color: #b5875e;
            font-weight: 600;
        }
        .modal label {
            font-weight: 500;
            color: #3d4e4a;
            margin-bottom: 0.2rem;
        }
        .modal input {
            padding: 0.8rem 1rem;
            border: 1px solid #d4cabc;
            border-radius: 60px;
            font-size: 1rem;
            width: 100%;
            outline: none;
            background: #fbf9f6;
        }
        .modal input:focus {
            border-color: #b5875e;
            background: white;
        }
        .modal-actions {
            display: flex;
            gap: 0.6rem;
            justify-content: flex-end;
            margin-top: 0.5rem;
        }
        .empty-cart-msg {
            color: #80705e;
            font-style: italic;
            font-weight: 300;
            padding: 0.2rem 0;
        }
        .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #2d3e42; color: #f0ebe2; padding: 0.8rem 2rem; border-radius: 60px; font-size: 0.95rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2); opacity: 0; transition: 0.3s; pointer-events: none; z-index: 1000; }
        .toast.show { opacity: 1; }
        .info-note {
            text-align: center;
            font-size: 0.85rem;
            color: #7a6a58;
            margin-top: 0.5rem;
            border-top: 1px solid #e5ddd2;
            padding-top: 0.8rem;
        }
        .info-note strong {
            color: #b5875e;
        }
        @media (max-width: 600px) {
            body { padding: 1rem; }
            .cart-section { flex-direction: column; align-items: stretch; }
            .time-selector { margin-left: 0; width: 100%; justify-content: flex-end; }
            h1 { flex-direction: column; align-items: stretch; }
            .week-grid { grid-template-columns: 1fr; }
        }