/* Hide mini cart until ShootKey is entered */
.msp-minicart-hidden {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity .2s ease, visibility .2s ease;
}

/* Back + empty-cart action row on cart / checkout pages */
.msp-cart-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: 16px 0;
}

/* Sticky fallback — used when buttons are injected via wp_footer
   (block-based cart/checkout where classic WC hooks don't fire). */
.msp-cart-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 999;
    background: #fff;
    border-top: 2px solid #e0e0e0;
    padding: 14px 24px;
    margin: 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.msp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #fff;
    border: 2px solid #1a73e8;
    border-radius: 8px;
    color: #1a73e8;
    font-size: .93rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    transition: background .15s, color .15s, box-shadow .15s;
}
.msp-back-btn:hover {
    background: #e8f0fe;
    color: #1558b3;
    border-color: #1558b3;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    text-decoration: none;
}

/* MSP ShootKey — Frontend */
.msp-wrap *, .msp-wrap *::before, .msp-wrap *::after { box-sizing: border-box; }
.msp-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 760px; margin: 0 auto; padding: 0 16px; color: #1a1a1a; }

/* Restored cart notice */
.msp-restore-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-left: 4px solid #2e7d32;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 22px;
    position: relative;
    font-size: .93rem;
    line-height: 1.5;
}
.msp-restore-notice__icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.msp-restore-notice strong { color: #1b5e20; }
.msp-restore-notice__list {
    margin: 6px 0 4px 16px;
    padding: 0;
    color: #2e7d32;
}
.msp-restore-notice__hint { margin: 4px 0 0; color: #555; font-size: .85rem; }
.msp-restore-notice__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #555;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.msp-restore-notice__close:hover { color: #111; }

/* Active student heading above products */
.msp-active-student {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a73e8;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: #e8f0fe;
    border-left: 4px solid #1a73e8;
    border-radius: 0 8px 8px 0;
}
.msp-active-student[hidden] { display: none; }

/* Steps */
.msp-step[hidden] { display: none; }
.msp-step { animation: mspFade 0.2s ease; }
@keyframes mspFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Headings */
.msp-heading  { font-size: 1.55rem; font-weight: 700; margin: 0 0 8px; }
.msp-subtext  { color: #555; margin: 0 0 22px; line-height: 1.55; }

/* Form */
.msp-form .msp-field { margin-bottom: 18px; }
.msp-form label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.93rem; }
.msp-form input[type="text"],
.msp-form input[type="email"],
.msp-form input[type="tel"] {
    width: 100%; max-width: 360px; padding: 11px 14px;
    border: 2px solid #cdd3db; border-radius: 8px; font-size: 1rem;
    outline: none; transition: border-color .15s; background: #fff;
}
.msp-form input:focus { border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,.14); }

/* Buttons */
.msp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 8px; font-size: 0.97rem; font-weight: 600;
    cursor: pointer; border: 2px solid transparent; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.msp-btn--primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.msp-btn--primary:hover { background: #1558b3; border-color: #1558b3; color: #fff; }
.msp-btn--ghost  { background: transparent; color: #1a73e8; border-color: #1a73e8; }
.msp-btn--ghost:hover { background: #e8f0fe; }
.msp-btn--danger { background: transparent; color: #c62828; border-color: #c62828; }
.msp-btn--danger:hover { background: #c62828; color: #fff; }
.msp-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Empty cart button styles handled by .msp-btn--danger */

/* Mini cart empty button */
.msp-mini-cart-empty { margin-top: .5rem; width: 100%; }

/* Spinner */
.msp-spinner { display:none; width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: mspSpin .6s linear infinite; }
.msp-btn--loading .msp-spinner { display: inline-block; }
@keyframes mspSpin { to { transform: rotate(360deg); } }

/* Error */
.msp-error { color: #c0392b; font-size: .88rem; margin-bottom: 10px; min-height: 18px; }

/* Student card */
.msp-student-card {
    background: #f0f7ff; border: 2px solid #1a73e8; border-radius: 12px;
    padding: 18px 22px; margin-bottom: 24px;
}
.msp-student-card__name   { font-size: 1.45rem; font-weight: 700; margin-bottom: 4px; }
.msp-student-card__folder { color: #555; font-size: 0.93rem; }

/* Siblings */
.msp-sibling-section { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 10px; padding: 18px 22px; margin-bottom: 22px; }
.msp-sibling-section h3 { margin: 0 0 6px; font-size: 1.05rem; }
.msp-sibling-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.msp-sibling-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: #fff; border: 2px solid #d0d5dd; border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.msp-sibling-item:hover { border-color: #1a73e8; }
.msp-sibling-item--selected { border-color: #1a73e8; background: #e8f0fe; }
.msp-sibling-item input[type="checkbox"] { width:17px; height:17px; accent-color:#1a73e8; cursor:pointer; }
.msp-sibling-item label { cursor:pointer; font-weight:600; margin:0; }

/* Tabs */
.msp-student-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; border-bottom:2px solid #e0e0e0; padding-bottom:0; }
.msp-tab { padding:9px 16px; border:2px solid transparent; border-bottom:none; border-radius:7px 7px 0 0; background:#f5f5f5; font-weight:600; font-size:.93rem; cursor:pointer; margin-bottom:-2px; transition:background .12s; }
.msp-tab[aria-selected="true"] { background:#fff; border-color:#e0e0e0; border-bottom-color:#fff; color:#1a73e8; }
.msp-tab:hover { background:#e8f0fe; }

/* Actions */
.msp-step-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; align-items:center; }
.msp-step-actions [data-msp-empty-cart] { margin-left:auto; }
.msp-step-actions [hidden] { display:none !important; }

/* Sticky action bar on the Choose Package step */
.msp-step-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: #fff;
    border-top: 2px solid #e0e0e0;
    padding: 14px 0;
    margin-top: 0;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}

/* Products loading state */
.msp-products-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:#555; gap:14px; }
.msp-products-loading p { margin:0; font-size:.95rem; }
.msp-spinner--dark { display:inline-block !important; width:28px; height:28px; border:3px solid #ddd; border-top-color:#1a73e8; border-radius:50%; animation:mspSpin .7s linear infinite; }


/* ── Product grid & cards ────────────────────────────────────────────────── */
.msp-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
}

.msp-product-card {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s, transform .18s;
}
.msp-product-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
    transform: translateY(-2px);
}

.msp-product-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f4f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msp-product-card__img img,
.msp-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msp-product-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.msp-product-card__name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
    line-height: 1.35;
}

/* Price — prominent, below name */
.msp-product-card__price {
    min-height: 1.5em;
}
.msp-price {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a73e8;
    line-height: 1.2;
}
.msp-price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.msp-product-card__desc {
    font-size: .85rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

/* Read more toggle */
.msp-read-more {
    background: none;
    border: none;
    padding: 0;
    color: #1a73e8;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}
.msp-read-more:hover { color: #1558b3; }
.msp-desc-full[hidden] { display: none; }

.msp-price--none {
    font-size: .9rem;
    font-weight: 400;
    color: #888;
}

/* Actions row — qty + add to cart */
.msp-product-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.msp-qty-wrap {
    display: flex;
    align-items: center;
    border: 2px solid #cdd3db;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.msp-qty-btn {
    width: 32px;
    height: 36px;
    border: none;
    background: #f0f2f5;
    color: #333;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background .12s;
    padding: 0;
    flex-shrink: 0;
}
.msp-qty-btn:hover { background: #dde1e7; }
.msp-qty-input {
    width: 38px;
    height: 36px;
    border: none;
    border-left: 1px solid #cdd3db;
    border-right: 1px solid #cdd3db;
    text-align: center;
    font-size: .95rem;
    font-weight: 600;
    color: #1a1a1a;
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
    margin: 0;
}
.msp-qty-input::-webkit-outer-spin-button,
.msp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.msp-qty-input:focus { outline: none; }

.msp-atc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    height: 40px;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    white-space: nowrap;
}
.msp-atc-btn:hover { background: #1558b3; }
.msp-atc-btn:disabled { opacity: .65; cursor: not-allowed; }

/* Spinner inside Add to Cart */
.msp-atc-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mspSpin .6s linear infinite;
    flex-shrink: 0;
}
.msp-atc-btn--loading .msp-atc-spinner { display: inline-block; }

/* Feedback message below the button */
.msp-atc-feedback {
    font-size: .82rem;
    min-height: 1.1em;
    line-height: 1.4;
}
.msp-atc-feedback--ok  { color: #2e7d32; }
.msp-atc-feedback--err { color: #c0392b; }

/* No products message */
.msp-no-products {
    text-align: center;
    color: #888;
    padding: 40px 0;
    font-size: .95rem;
}

/* Responsive — 2 cols on small screens, 1 on mobile */
@media (max-width: 600px) {
    .msp-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 380px) {
    .msp-product-grid { grid-template-columns: 1fr; }
}
/* Responsive */
@media(max-width:480px){
    .msp-heading { font-size: 1.25rem; }
    .msp-btn { width:100%; justify-content:center; }
    .msp-form input { max-width:100%; }
}