/* ──────────────────────────────────────────────────────────────────
   GOR Masgun — Membership Diskon [gor_membership_diskon]
   Styled to match Masgun Badminton Hall Brand Guidelines (2026):
   - Header font : Source Serif Pro
   - Body font   : Helvetica / system sans
   - Colors      : Forest Green #005F01, Natural Green #6EB421,
                    Soft Cream #FEF4E3, Charcoal #202020, Olive #35362F
   - Tone        : calm, simple, uncluttered — thin hairlines instead
                    of heavy shadows, tracked uppercase micro-labels.
   ────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;600;700&display=swap');

.gor-dm-wrap * { box-sizing: border-box; }

.gor-dm-wrap {
    --dm-green    : #005F01;   /* Forest Green */
    --dm-green-dk : #003D01;   /* Forest Green, darkened — for hover states */
    --dm-green-lt : #6EB421;   /* Natural Green */
    --dm-cream    : #FEF4E3;   /* Soft Cream */
    --dm-black    : #202020;   /* Charcoal Black */
    --dm-olive    : #35362F;   /* Charcoal Olive */
    --dm-border   : rgba(32, 32, 32, .14);
    --dm-bg       : #FEF4E3;
    --dm-radius   : 8px;

    --dm-font-head: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --dm-font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-family: var(--dm-font-body);
    color: var(--dm-black);
    max-width: 720px;
    margin: 0 auto;
    background: var(--dm-bg);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    padding: 32px clamp(18px, 4vw, 40px);
}

.gor-dm-step { display: none; }
.gor-dm-step.gor-dm-step-active { display: block; animation: gorDmFade .25s ease; }
@keyframes gorDmFade { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform:none; } }

/* Headings — serif, brand voice */
.gor-dm-title {
    font-family: var(--dm-font-head);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .2px;
    margin: 0 0 6px;
    color: var(--dm-black);
}
.gor-dm-subtitle {
    color: var(--dm-olive);
    margin: 0 0 24px;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--dm-border);
}

/* Package cards */
.gor-dm-packages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .gor-dm-packages { grid-template-columns: 1fr; } }

.gor-dm-package-card {
    background: #fff;
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: border-color .2s ease;
}
.gor-dm-package-card:hover { border-color: var(--dm-green); }

.gor-dm-package-badge {
    display: inline-block;
    background: transparent;
    color: var(--dm-green);
    font-family: var(--dm-font-body);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 0;
    margin-bottom: 12px;
    width: fit-content;
    border-bottom: 2px solid var(--dm-green-lt);
}
.gor-dm-package-name {
    font-family: var(--dm-font-head);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--dm-black);
}
.gor-dm-package-tagline { font-size: 13px; color: var(--dm-olive); margin: 0 0 16px; }

.gor-dm-package-meta { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13px; }
.gor-dm-package-meta li { padding: 7px 0; border-top: 1px dashed var(--dm-border); }
.gor-dm-package-meta li:first-child { border-top: none; }
.gor-dm-package-meta strong { color: var(--dm-green); font-weight: 700; }

.gor-dm-package-buy {
    margin-top: auto;
    background: var(--dm-green);
    color: var(--dm-cream) !important;
    border: 1px solid var(--dm-green);
    padding: 12px 16px;
    font-family: var(--dm-font-body);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: background .2s ease, border-color .2s ease;
}
.gor-dm-package-buy:hover { background: var(--dm-green-dk); border-color: var(--dm-green-dk); color: var(--dm-cream) !important; }

/* Progress bar */
.gor-dm-progress-wrap { margin: 4px 0 22px; }
.gor-dm-progress-text {
    font-size: 12px; font-weight: 700; color: var(--dm-olive);
    text-transform: uppercase; letter-spacing: .6px;
    margin-bottom: 8px; display: block;
}
.gor-dm-progress-track { background: var(--dm-border); border-radius: 999px; height: 6px; overflow: hidden; }
.gor-dm-progress-fill { background: var(--dm-green-lt); height: 100%; width: 0; transition: width .3s; }
.gor-dm-progress-fill.is-complete { background: var(--dm-green); }

/* Schedule builder */
.gor-dm-picker-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.gor-dm-picker-row select {
    flex: 1; min-width: 140px; padding: 10px 12px; border: 1px solid var(--dm-border);
    border-radius: 6px; background: #fff; font-family: var(--dm-font-body); font-size: 14px; color: var(--dm-black);
}
.gor-dm-picker-row button {
    background: var(--dm-black); color: var(--dm-cream); border: 1px solid var(--dm-black);
    padding: 10px 18px; border-radius: 6px; font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .6px; cursor: pointer;
}

.gor-dm-slot-date { font-size: 13px; color: var(--dm-olive); margin: 8px 0 12px; }
.gor-dm-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 20px; }
.gor-dm-slot-btn {
    background: #fff; border: 1px solid var(--dm-border); border-radius: 6px;
    padding: 10px 8px; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center;
    display: flex; flex-direction: column; gap: 2px; color: var(--dm-olive); transition: border-color .15s, color .15s;
}
.gor-dm-slot-btn span { font-size: 11px; font-weight: 500; color: var(--dm-olive); }
.gor-dm-slot-btn:hover:not(.is-booked) { border-color: var(--dm-green); color: var(--dm-green); }
.gor-dm-slot-btn.is-booked { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.gor-dm-schedule-list { margin: 12px 0 20px; }
.gor-dm-schedule-item {
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; border: 1px solid var(--dm-border); border-radius: 6px;
    padding: 10px 14px; margin-bottom: 8px; font-size: 13px;
}
.gor-dm-schedule-remove {
    background: none; border: none; color: var(--dm-black); font-size: 18px; cursor: pointer; line-height: 1; opacity: .5;
}
.gor-dm-schedule-remove:hover { opacity: 1; color: #a33; }

.gor-dm-muted { color: #8c8a80; font-size: 13px; }
.gor-dm-error { color: #a33; font-size: 13px; }

h4 {
    font-family: var(--dm-font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--dm-black);
    margin: 0 0 10px;
}

/* Summary */
.gor-dm-summary-box {
    background: #fff; border: 1px solid var(--dm-border); border-radius: var(--dm-radius);
    padding: 20px 22px; margin-bottom: 20px;
}
.gor-dm-summary-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--dm-border); font-size: 14px; }
.gor-dm-summary-row span { color: var(--dm-olive); }
.gor-dm-summary-row:last-child { border-bottom: none; }
.gor-dm-summary-row.is-total {
    font-family: var(--dm-font-head); font-weight: 700; font-size: 18px; color: var(--dm-green);
    border-top: 1px solid var(--dm-black); margin-top: 4px; padding-top: 14px;
}
.gor-dm-summary-row.is-total span { color: var(--dm-black); font-family: var(--dm-font-body); font-size: 14px; }
.gor-dm-summary-row .val-discount { color: #a33; }
#gorDMSummaryConflict { background: #FEF4E3; color: var(--dm-olive); border: 1px solid var(--dm-border); border-radius: 6px; padding: 10px 14px; font-size: 12px; margin-bottom: 16px; display: none; }

.gor-dm-form-group { margin-bottom: 14px; }
.gor-dm-form-group label {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--dm-olive); margin-bottom: 6px;
}
.gor-dm-form-group input {
    width: 100%; padding: 11px 12px; border: 1px solid var(--dm-border); border-radius: 6px;
    font-family: var(--dm-font-body); font-size: 14px; color: var(--dm-black); background: #fff;
}
.gor-dm-form-group input:focus { outline: none; border-color: var(--dm-green); }

.gor-dm-btn-primary {
    background: var(--dm-green); color: var(--dm-cream) !important; border: 1px solid var(--dm-green);
    padding: 14px 20px; font-family: var(--dm-font-body); font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 1px; border-radius: 6px; cursor: pointer;
    width: 100%; transition: background .2s ease, border-color .2s ease;
}
.gor-dm-btn-primary:hover { background: var(--dm-green-dk); border-color: var(--dm-green-dk); color: var(--dm-cream) !important; }
.gor-dm-btn-primary:disabled { opacity: .4; cursor: not-allowed; }

.gor-dm-btn-link {
    background: none; border: none; color: var(--dm-olive); font-size: 12px; cursor: pointer;
    text-transform: uppercase; letter-spacing: .6px; text-decoration: none; padding: 0; margin-bottom: 18px;
}
.gor-dm-btn-link:hover { color: var(--dm-green); }