/* CS Nahuga Main - Frontend Styles */

/* RTL base (no font - inherits from theme/Elementor) */
.cs-nahuga-class,
.cs-nahuga-family,
.cs-nahuga-member-zone,
.cs-nahuga-attendance,
.cs-nahuga-attendance-history,
.cs-nahuga-instructor-classes {
    direction: rtl;
    max-width: 100%;
}

/* Notice */
.cs-nahuga-notice {
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    text-align: center;
}

/* Tables */
.cs-class-table,
.cs-family-table,
.cs-attendance-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.cs-class-table th,
.cs-class-table td,
.cs-family-table th,
.cs-family-table td,
.cs-attendance-table th,
.cs-attendance-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: right;
    vertical-align: middle;
}

.cs-class-table thead,
.cs-family-table thead,
.cs-attendance-table thead {
    background: #f8f9fa;
}

/* Buttons */
.cs-nahuga-class .btn,
.cs-nahuga-family .btn,
.cs-nahuga-member-zone .btn,
.cs-nahuga-attendance .btn {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.5;
}

.btn-primary { background: #0073aa; color: #fff; border-color: #0073aa; }
.btn-primary:hover { background: #005a87; }
.btn-success { background: #46b450; color: #fff; border-color: #46b450; }
.btn-success:hover { background: #3a9a42; }
.btn-secondary { background: #6c757d; color: #fff; border-color: #6c757d; }
.btn-danger { background: #dc3232; color: #fff; }
.btn-outline-primary { background: transparent; color: #0073aa; border-color: #0073aa; }
.btn-outline-danger { background: transparent; color: #dc3232; border-color: #dc3232; }
.btn-sm { padding: 3px 10px; font-size: 12px; }

/* Form controls */
.form-control {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    direction: rtl;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 3px;
}

.badge-success { background: #46b450; color: #fff; }
.badge-warning { background: #ffb900; color: #23282d; }
.badge-danger { background: #dc3232; color: #fff; }
.badge-secondary { background: #6c757d; color: #fff; }

/* Registration modal */
.cs-register-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.cs-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    direction: rtl;
}

.cs-modal-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

/* Family member rows */
.cs-family-member-row {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.cs-already-registered {
    color: #999;
    font-style: italic;
    margin-right: 5px;
}

/* Class cards (member zone) */
.cs-class-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
}

.cs-class-card.cs-class-atq {
    border-color: #ffb900;
    background: #fffdf0;
}

.cs-class-card.cs-class-quit {
    border-color: #46b450;
    background: #f4faf4;
}

.cs-class-card-note {
    margin-top: 8px;
    font-size: 13px;
    color: #555;
}

/* Monthly cost summary under each member's class cards */
.cs-member-costs {
    margin: 12px 0 24px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    max-width: 560px;
}
.cs-member-costs h5 {
    margin: 0 0 8px;
    font-size: 14px;
}
.cs-member-costs table {
    width: 100%;
    border-collapse: collapse;
}
.cs-member-costs td {
    padding: 6px 10px;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
}
.cs-member-costs tfoot td {
    border-bottom: 1px solid #d5d5d5;
    border-top: 2px solid #d5d5d5;
    font-weight: 700;
}
.cs-member-costs .cs-member-costs-value {
    text-align: left;
    white-space: nowrap;
}
.cs-member-costs-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: #555;
}
.cs-member-costs h5 + table {
    margin-top: 4px;
}
.cs-member-costs-family {
    margin: 14px 2px 0;
    font-size: 15px;
}
.cs-member-costs-method {
    margin: 0 0 12px;
    font-size: 14px;
}

/* The costs modal earns a wider box on desktop - its tables need the room
   (the shared modal default stays 500px for the class page) */
#csMemberCostsModal .cs-class-modal-content {
    max-width: 720px;
}
#csMemberCostsModal .cs-member-costs {
    max-width: none;
}

/* The costs button must not look like the (red) withdrawal buttons */
.cs-nahuga-member-zone .cs-member-costs-open {
    margin-top: 15px;
}
.cs-nahuga-member-zone button.cs-costs-btn {
    background-color: #2ba39a;
    border-color: #2ba39a;
}
.cs-nahuga-member-zone button.cs-costs-btn:hover,
.cs-nahuga-member-zone button.cs-costs-btn:focus {
    background-color: #23857e;
    border-color: #23857e;
}

/* Unfinished-cart notice at the top of the member zone */
.cs-member-pending-notice {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #dba617;
    border-right-width: 4px;
    border-radius: 4px;
    background: #fcf9e8;
}
.cs-member-pending-notice p {
    margin: 0 0 10px;
}

/* Dates, hours, identifiers - values that must read left-to-right */
.cs-ltr-value {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

.cs-class-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cs-class-card-body {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    color: #666;
    font-size: 13px;
}

.cs-class-card-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* External class */
.cs-external-class {
    text-align: center;
    padding: 20px;
    background: #f0f6fc;
    border: 1px solid #c3d9ed;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Family form */
.cs-family-form {
    background: #f8f9fa;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 15px 0;
}

.cs-add-member-btn {
    margin-top: 10px;
}

/* Member classes section */
.cs-member-classes {
    margin-bottom: 25px;
}

.cs-member-classes h4 {
    border-bottom: 2px solid #0073aa;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .cs-class-table,
    .cs-family-table,
    .cs-attendance-table {
        font-size: 12px;
    }

    .cs-class-table th,
    .cs-class-table td,
    .cs-family-table th,
    .cs-family-table td {
        padding: 5px 8px;
    }

    .cs-class-card-body {
        flex-direction: column;
        gap: 5px;
    }

    .cs-modal-content {
        padding: 20px;
    }
}

/* Alerts */
.alert {
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

/* Table warning row */
.table-warning {
    background: #fff3cd !important;
}

/* Text utilities */
.text-muted { color: #999; }
.text-warning { color: #856404; }
.text-danger { color: #dc3232; }

/* ===========================
   Login / Register shortcode
   =========================== */
.cs-login-register {
    max-width: 480px;
    margin: 20px auto;
    padding: 25px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    direction: rtl;
}

.cs-login-register h3 {
    margin-top: 0;
    color: #1e6697;
}

.cs-login-register .cs-current-email {
    background: #f0f6fc;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    direction: ltr;
    text-align: left;
    margin-bottom: 15px;
}

.cs-login-register .cs-field {
    margin-bottom: 15px;
}

.cs-login-register .cs-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
}

.cs-login-register .cs-field input {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.cs-login-register .cs-field input:focus {
    border-color: #1e6697;
    outline: none;
}

.cs-login-register .cs-field small {
    display: block;
    margin-top: 4px;
    color: #777;
    font-size: 12px;
}

.cs-login-register .cs-field-row {
    display: flex;
    gap: 10px;
}

.cs-login-register .cs-field-row .cs-field {
    flex: 1;
}

.cs-login-register .cs-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.cs-login-register .cs-btn {
    padding: 10px 20px;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.cs-login-register .cs-btn-primary {
    background: #1e6697;
    color: #fff;
    border-color: #1e6697;
}

.cs-login-register .cs-btn-primary:hover { background: #155485; }
.cs-login-register .cs-btn-primary:disabled { opacity: 0.6; cursor: wait; }

.cs-login-register .cs-btn-secondary {
    background: #6c757d;
    color: #fff;
    border-color: #6c757d;
}

.cs-login-register .cs-btn-link,
.cs-login-register .cs-btn-forgot {
    background: none;
    border: none;
    color: #1e6697;
    text-decoration: underline;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 13px;
}

.cs-login-register .cs-form-error {
    margin-top: 12px;
    color: #c62828;
    font-size: 14px;
    min-height: 1em;
}

.cs-login-register .cs-form-success {
    margin-top: 12px;
    color: #2e7d32;
    font-size: 14px;
    min-height: 1em;
}

/* Modal */
.cs-login-register .cs-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.cs-login-register .cs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.cs-login-register .cs-modal-content {
    position: relative;
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.cs-login-register .cs-modal-content h4 {
    margin-top: 0;
    color: #1e6697;
}

.cs-login-register .cs-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 480px) {
    .cs-login-register .cs-field-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ===========================
   [cs_class] - Inherits theme/Elementor styles
   No colors/fonts set - layout only
   =========================== */

/* Table */
.cs-nahuga-class .cs-class-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font: inherit;
}

.cs-nahuga-class .cs-class-table th,
.cs-nahuga-class .cs-class-table td {
    padding: 8px 12px;
    border: 1px solid currentColor;
    border-color: rgba(128, 128, 128, 0.25);
    text-align: right;
    vertical-align: middle;
    font: inherit;
    color: inherit;
}

.cs-nahuga-class .cs-price-subtitle {
    display: block;
    font-size: 0.78em;
    opacity: 0.75;
    font-weight: normal;
    margin-top: 2px;
}

/* Class buttons - rely on Elementor's .elementor-button styles.
   Only minimal fallback when Elementor isn't loaded. */
.cs-nahuga-class .cs-class-btn {
    cursor: pointer;
    text-decoration: none;
}
.cs-nahuga-class .cs-class-btn:not(.elementor-button) {
    /* Fallback for non-Elementor themes */
    display: inline-block;
    padding: 6px 18px;
    border-radius: 4px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.5;
}

/* Status labels */
.cs-nahuga-class .cs-class-status { font: inherit; }
.cs-nahuga-class .cs-status-muted { opacity: 0.6; }
.cs-nahuga-class .cs-status-danger { color: inherit; font-weight: bold; }
.cs-nahuga-class .cs-status-warning { font: inherit; }

/* Modals (own namespace to avoid conflicts).
   Shared by the class page and the member zone (costs modal). */
.cs-nahuga-class .cs-class-modal,
.cs-nahuga-member-zone .cs-class-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    direction: rtl;
}

.cs-nahuga-class .cs-class-modal-backdrop,
.cs-nahuga-member-zone .cs-class-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.cs-nahuga-class .cs-class-modal-content,
.cs-nahuga-member-zone .cs-class-modal-content {
    position: relative;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    color: inherit;
    font: inherit;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

.cs-nahuga-class .cs-class-modal-content h4,
.cs-nahuga-member-zone .cs-class-modal-content h4 {
    margin-top: 0;
    font: inherit;
    font-weight: bold;
    font-size: 1.25em;
}

.cs-nahuga-class .cs-class-modal-actions,
.cs-nahuga-member-zone .cs-class-modal-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Family list inside modal */
.cs-nahuga-class .cs-family-list {
    margin: 10px 0;
}
.cs-nahuga-class .cs-family-member-row {
    padding: 6px 0;
    border-bottom: 1px solid rgba(128,128,128,0.2);
}
.cs-nahuga-class .cs-family-member-row:last-child { border-bottom: none; }
.cs-nahuga-class .cs-already-registered {
    opacity: 0.6;
    font-style: italic;
    margin-right: 5px;
}

@media (max-width: 768px) {
    .cs-nahuga-class .cs-class-table {
        font-size: 0.92em;
    }
    .cs-nahuga-class .cs-class-modal-content {
        padding: 20px;
    }
}

/* ===========================
   Plugin buttons inherit the Elementor global button size - too big.
   Scaled down to 0.8 across the plugin front.
   =========================== */
/* The scale sits on the INNER text span on purpose: there, em is measured
   against the font-size Elementor set on the button itself - so every
   button shrinks by the same ratio relative to its original size,
   whatever the kit defines. Never set a size on .cs-class-btn directly. */
.cs-class-btn .elementor-button-text {
    font-size: 0.9em !important;
}

/* ===========================
   Confirmation modal (replaces browser confirm - never used on the front)
   =========================== */
.cs-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
}

.cs-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.cs-confirm-box {
    position: relative;
    background: #fff;
    color: #23282d;
    border-radius: 6px;
    padding: 22px 26px;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    text-align: right;
}

.cs-confirm-message {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.5;
}

.cs-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.cs-confirm-actions button {
    border: 1px solid #c9c9cf;
    border-radius: 4px;
    padding: 7px 22px;
    font-size: 15px;
    cursor: pointer;
    background: #fff;
    color: #23282d;
}

.cs-confirm-actions .cs-confirm-ok {
    background: #23282d;
    border-color: #23282d;
    color: #fff;
}

.cs-confirm-actions button:hover {
    opacity: 0.85;
}

.cs-confirm-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Withdrawal modal: quit regulations + read-acknowledgement checkbox */
.cs-quit-box {
    max-width: 560px;
}

.cs-quit-title {
    margin: 0 0 12px;
}

.cs-quit-regulations {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    padding: 12px 15px;
    margin-bottom: 14px;
    text-align: right;
}

.cs-quit-ack {
    display: block;
    margin-bottom: 16px;
    cursor: pointer;
}

.cs-quit-ack input {
    margin-left: 8px;
}

/* ===========================
   [cs_class] - Responsive: stacked schedule rows on small screens.
   Each cell shows its column header via data-label.
   =========================== */
@media (max-width: 768px) {
    .cs-nahuga-class .cs-class-table thead {
        display: none;
    }

    .cs-nahuga-class .cs-class-table,
    .cs-nahuga-class .cs-class-table tbody,
    .cs-nahuga-class .cs-class-table tr {
        display: block;
        width: 100%;
    }

    .cs-nahuga-class .cs-class-table tr {
        border: 1px solid rgba(128, 128, 128, 0.3);
        border-radius: 6px;
        margin-bottom: 14px;
        overflow: hidden;
    }

    .cs-nahuga-class .cs-class-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border: 0;
        border-bottom: 1px solid rgba(128, 128, 128, 0.15);
        padding: 7px 12px;
    }

    .cs-nahuga-class .cs-class-table td:last-child {
        border-bottom: 0;
    }

    /* Cells with no value (venue, instructor, notes...) vanish entirely */
    .cs-nahuga-class .cs-class-table td:empty {
        display: none;
    }

    .cs-nahuga-class .cs-class-table td::before {
        content: attr(data-label);
        font-weight: 600;
        flex-shrink: 0;
    }

    /* The registration cell: no label, full-width button */
    .cs-nahuga-class .cs-class-table td.cs-class-cell-action {
        display: block;
        text-align: center;
        padding: 10px 12px;
    }
    .cs-nahuga-class .cs-class-table td.cs-class-cell-action::before {
        content: none;
    }
    .cs-nahuga-class .cs-class-table td.cs-class-cell-action .cs-class-btn {
        width: 100%;
    }
}