/* Attempt to set styles for woodcote_api.js JavaScript */
#password-confirm-punct-warning { display: none; }

.wrap-sisters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;

    .sister-mag {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        text-align: center;
        transition: transform 0.2s, box-shadow 0.2s;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        a {
            display: block;

            img {
                width: 100%;
                height: auto;
                object-fit: cover;
                display: block;
            }
        }

        p {
            font-weight: bold;
            text-align: center;
            padding: 10px;
            margin: 0;
        }
    }
}

@media (max-width: 640px) {
    .wrap-sisters {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Issue Grid */

.issues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
    a.view-contents-link {display: block;background: #0d6efd;padding: 4px;color:#fff;text-decoration: none;}
a.view-contents-link:hover { background: #0056b3;text-decoration: none; }

@media (max-width: 900px) {
    .issues-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .issues-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.issue-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.issue-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.issue-cover {
    width: 100%;
    height: auto;
}
.issue-info { 
    padding: 10px 0 0 0; 
    background: #f8f8f8;
}
.view-contents-link {
    display: inline-block;
    margin-top: 5px;
    color: #007bff;
    text-decoration: none;
}
.view-contents-link:hover { text-decoration: underline; }
.no-cover { height: 150px; display: flex; align-items: center; justify-content: center; background: #eee; color: #888; font-size: 14px; }

/* Content List */

.issue-cover {
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.contentlist {
    padding: 0;
}
.contentlist table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1rem;
}
.contentlist td {
    background: white;
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
h3, h4 {
    margin-bottom: 0.75rem;
}
.headings {
    margin-bottom: 1.5rem;
}

.pdf-link {
    color: #fff;
    font-weight: 500;
    width: 100%;
    display: block;
    background: #0d6efd;
    color: #fff;
    text-decoration: none;
}

.pdf-link:hover {
    text-decoration: none;
}

h4.article-headline, .issue-content small {
    margin-bottom: 0 !important;
}

.issue-content small {
    font-weight: bold;
}

.volissue {
    margin-bottom: 6px;
    display: block;
}

a.subscribe_now:hover {
    text-decoration: none !important;
}

/* Checkbox */

.form-group.terms-checkbox {
  margin: 1.5rem 0;
  font-size: 1rem;
}

.terms-checkbox input[type="checkbox"] {
  margin-right: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  accent-color: #0066cc; /* change to your brand color */
  vertical-align: middle;
}

.terms-checkbox label {
  display: inline;
  cursor: pointer;
  color: #333;
  font-size: 12px;
}

.terms-checkbox a {
  color: #0066cc;
  text-decoration: underline;
}

.terms-checkbox a:hover,
.terms-checkbox a:focus {
  text-decoration: none;
}

.required-indicator {
  color: #d32f2f;
  margin-left: 0.25rem;
  font-weight: bold;
}

/* Show red outline when invalid (after submit attempt) */
.terms-checkbox input:invalid:focus {
  outline: 2px solid #d32f2f;
}

.checklist {
    list-style: none;           /* remove default bullets */
    padding-left: 0;
}

.checklist li {
    position: relative;
    padding-left: 2em;          /* space for the checkmark */
    margin-bottom: 0.8em;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

.checklist li::before {
    content: "\f00c";           /* Font Awesome check icon */
    font-family: "Font Awesome 6 Free";  
    font-weight: 900;           /* solid style */
    position: absolute;
    left: 0;
    top: 0;
    color: #28a745;             /* green checkmark */
    font-size: 1.2em;
}

/* ==========================================================================
   SHOP / SUBSCRIPTION FORM – MATCHES OTHER MAGAZINE GRIDS
   ========================================================================== */

.shop-subscription-form {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem 0rem;
}

/* Summary box */
.shop-subscription-form .subscription-summary {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 2rem;
}

.shop-subscription-form .subscription-summary h3 {
    margin-bottom: 0.75rem;
}

/* Grid – identical to your other magazine grids */
.shop-subscription-form .issues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 2.5rem;
}

.shop-subscription-form .issue-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.shop-subscription-form .issue-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.shop-subscription-form .issue-cover {
    width: 100%;
    height: auto;
}

.shop-subscription-form .issue-info {
    padding: 10px 0 0 0;
}

.shop-subscription-form .no-cover {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #888;
    font-size: 14px;
}

/* View contents link – matches your other grids */
.shop-subscription-form a.view-contents-link {
    display: block;
    background: #0d6efd;
    padding: 6px 12px;
    color: #fff;
    text-decoration: none;
    margin: 0;
    border-radius: 4px;
    font-size: 0.95rem;
}

.call-to-action:hover {
    text-decoration: none;
}

.shop-subscription-form a.view-contents-link:hover {
    background: #0056b3;
    text-decoration: none;
}

/* Quantity selector */
.shop-subscription-form .quantity-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0 0.2rem;
}

.shop-subscription-form .quantity-select label {
    margin-bottom: 0;
    font-size: 0.75rem;
}

.quantity-select .form-select {
    line-height: 1;
}

/* Submit button */
.shop-subscription-form .submit-button {
    min-width: 200px;
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
    background: #0d6efd;
    border: none;
    color: white;
    border-radius: 6px;
    transition: background 0.2s;
}

.shop-subscription-form .submit-button:hover,
.shop-subscription-form .submit-button:focus {
    background: #0056b3;
}

/* Responsive – exactly the same as your other grids */
@media (max-width: 900px) {
    .shop-subscription-form .issues-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .shop-subscription-form .issues-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.shop-subscription-form .issue-card {
    display: flex;
    flex-direction: column;
    min-height: 320px;               /* optional: enforce minimum height for uniformity */
}

.shop-subscription-form .issue-cover-container {
    flex: 0 0 auto;
}

.shop-subscription-form .issue-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 0 0 0;
    background: #f8f8f8;
}

@media (max-width: 600px) {
    .shop-subscription-form .issue-info {
      font-size: .85rem;
    }
    .shop-subscription-form a.view-contents-link {
        font-size: .75rem;
    }
    .issue-info .small-note {
        font-size: 0.65rem;
    }
}

.buy-now-container {
    position: sticky;
    top: 72px;
    z-index: 9999;
    background: white;           /* Add background so it doesn't look weird */
    padding: 15px 0;
    border-top: 1px solid #eee;
}

.shop-subscription-form .view-contents-link {
    margin-top: auto;                /* pushes it to bottom */
    margin-bottom: 0;
}

.issue-info p {
    margin-bottom: 0;
}

.quantity-select select, .subscription-summary  select {
    max-width: 70px;
    text-align: center;
    text-align-last: center;
}

.cart-total {
font-size: 1.4rem;
font-weight: 600;
}

.cart-item {
font-size: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid #e9ecef;
}

.cart-item:last-child {
border-bottom: none;
}

/* Custom buttons - blue #0d6efd with white text, no underline on hover */
.custom-action-btn {
background-color: #0d6efd;
color: white;
border: none;
font-weight: 500;
transition: background-color 0.2s ease;
}

.custom-action-btn:hover,
.custom-action-btn:focus,
.custom-action-btn:active {
background-color: #0b5ed7; /* slightly darker blue on hover */
color: white;
text-decoration: none !important; /* no underline ever */
}

.custom-action-btn:focus {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}


/* Remove ONLY the validation icons (green tick + any red X), KEEP colored outlines/borders */

/* Inputs: text, email, password, etc. */
.form-control:valid,
.form-control.is-valid,
.form-control:invalid,
.form-control.is-invalid,
.was-validated .form-control:valid,
.was-validated .form-control:invalid {
    background-image: none !important;          /* kills the SVG icon (tick or cross) */
}

/* Dropdowns */
.form-select:valid,
.form-select.is-valid,
.form-select:invalid,
.form-select.is-invalid,
.was-validated .form-select:valid,
.was-validated .form-select:invalid {
    background-image: none !important;
}

/* Textareas (if you use any) */
textarea.form-control:valid,
textarea.form-control.is-valid,
textarea.form-control:invalid,
textarea.form-control.is-invalid {
    background-image: none !important;
}

/* Optional: Reset background positioning/padding so no empty space where icon was */
.form-control:valid,
.form-control.is-valid,
.form-select:valid,
.form-select.is-valid {
    background-position: right 0.75rem center !important;
    padding-right: 0.75rem !important;          /* normal padding, no icon reserved space */
}

/* ENSURE outlines stay (Bootstrap default + your JS classes) */
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #198754 !important;           /* keep green outline */
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important; /* keep green glow */
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #dc3545 !important;           /* keep red outline */
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important; /* keep red glow */
}

/* Same for selects */
.form-select.is-valid,
.was-validated .form-select:valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* Completely disable ALL Bootstrap/HTML5 validation styling on password fields */
/* No green outline, no red outline, no glow, no icons — just normal input look */

#password,
#password_confirm,
.form-control[type="password"]#password,
.form-control[type="password"]#password_confirm {
    /* Kill icons */
    background-image: none !important;

    /* Kill colored borders and glows (valid or invalid) */
    border-color: #ced4da !important;           /* default Bootstrap grey border */
    box-shadow: none !important;

    /* Force this even when :valid/:invalid or .is-valid/.is-invalid is added */
    border-color: #ced4da !important;
    box-shadow: none !important;
}

/* Optional: Keep normal focus border (blue-ish) when typing */
#password:focus,
#password_confirm:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    color: #333;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    font-weight: bold;
}

.woodcote-form-container, .woodcote-form-container .card {
    background: #f8f9fa;
    padding: 12px !important;
    border: 0;
    border-radius: 8px;
}