/* ========================================
   Public Module Styles
   For public-facing pages and shared layout
   ======================================== */

/* ========== Shared Utilities (Global) ========== */

/* Container utilities - universal across all components */
/* Used 14 times */
div.container,
nav.navbar-top .container,
div.stripe > .bg_fade > .container,
div.stripe[style*="background-image"] > .bg_fade > .container,
div.bg_fade > .container,
footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Button styles - shared across all modules */
/* Used 40 times (.btn) */
.btn, .cta {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    border-radius: 0px;
}

/* Used 40 times */
.btn {
    padding: 0.38rem 1rem;
    background: linear-gradient(135deg, #c5c8ca 0%, #a8acb0 100%);
    color: #333333;
}

.btn:hover {
    background: linear-gradient(135deg, #b8bcc0 0%, #9ca0a4 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Used 9 times */
.cta {
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000000;
    border: 1px outset;
}

.cta:hover {
    background: linear-gradient(135deg, #ffb300 0%, #f57c00 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.auth-reset-link {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
}

/* Float utilities - shared across modules */
/* Used 19 times */
.float-left { float: left; }
/* Used 10 times */
.float-right { float: right; }
/* Used 7 times */
.clear { clear: both; }

/* Float modifiers */
/* Used 2 times */
.float-left.clear-both { clear: both; }
/* Used 3 times */
.float-right.margin-top { margin-top: 16px; }
/* Used 1 time */
.float-right.compact { margin-right: 0.2em; }
/* Used 3 times */
.float-left.with-margin { margin-left: 1em; margin-top: 1em; }
/* Used 1 time */
.float-left.title { margin-left: 3em; }
/* Used 1 time */
.float-left.positioned { position: relative; padding: 8px; }

/* Used 8 times */
.clear-both { clear: both; }

/* Button-specific float classes */
/* Used 4 times */
.btn-float-right { float: right; }

/* Table utilities - shared across admin and user modules */
/* Used 4 times */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

/* Used 6 times */
.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 2px;
}

/* Used 6 times */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Used 1 time */
.table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.075);
}

/* Used 6 times */
.table-condensed th,
.table-condensed td {
    padding: 0.5rem;
}

/* Form controls */
/* Used 4 times */
.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:disabled,
.form-control[disabled] {
    background-color: #ddd;
}

/* Error messages - shared across modules */
/* Used 11 times */
.error-message,
span.error-message {
    color: red;
}

/* Navigation */
/* Used 11 times */
.nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.75rem;
}

/* Text utilities */
/* Used 8 times */
.text-large {
    font-size: 1.4em;
    margin-bottom: 8px;
}

/* Layout utilities */
/* Used 4 times */
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Border utilities */
/* Used 4 times */
.border-column {
    border: 1px solid silver;
    float: left;
    padding: 1em;
    min-width: 18em;
}

/* Width utilities */
/* Used 6 times */
.width-98pct { width: 98%; }

/* Spacing utilities */
/* Used 1 time */
.margin-top { margin-top: 8px; }

/* Display utilities */
/* Used 6 times */
.display-none { display: none; }

/* ========== Inline Style Utilities ========== */

/* Text styling utilities */
/* Used 9 times */
.text-italic { font-style: italic; }
/* Used 2 times */
.text-bold { font-weight: bold; }
/* Used 1 time */
.text-red { color: red; }
/* Used 1 time */
.text-center { text-align: center; }
/* Used 1 time */
.text-right { text-align: right; }

/* Font size utilities */
.font-size-1-2em { font-size: 1.2em; }
.font-size-1-4em { font-size: 1.4em; }
.font-size-1-5em { font-size: 1.5em; }

/* Margin utilities */
.margin-1em { margin: 1em; }
.margin-2em-sides { margin: 2em; margin-left: 4em; margin-right: 4em; }
.margin-bottom-1em { margin-bottom: 1em; }
.margin-bottom-2em { margin-bottom: 2em; }
.margin-left-1em { margin-left: 1em; }
.margin-left-2em { margin-left: 2em; }
.margin-left-3em { margin-left: 3em; }
.margin-left-auto { margin-left: auto; }
.margin-right-auto { margin-right: auto; }
.margin-top-2em { margin-top: 2em; }
.margin-top-3em { margin-top: 3em; }

/* Padding utilities */
.padding-1em { padding: 1em; }
.padding-8px { padding: 8px; }
.padding-left-2em { padding-left: 2em; }

/* Positioning utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-absolute-left-0 { position: absolute; left: 0; }

/* Width utilities */
.width-50pct { width: 50%; }
.width-96pct { width: 96%; }
.width-3-2em { width: 3.2em; }
.width-4em { width: 4em; }
.width-6em { width: 6em; }
.width-7em { width: 7em; }
.width-9em { width: 9em; }
.width-11em { width: 11em; }
.width-50pct-min { width: 50%; min-width: 50%; }
.width-48pct { width: 48%; }
.width-48pct-min { width: 48%; min-width: 48%; }
.width-48pct-min-float-right { width: 48%; min-width: 48%; float: right; margin-left: 0.5em; padding-bottom: 1.2em; }
.width-64pct { width: 64%; }
.width-700px { width: 700px; }

/* Height utilities */
.height-400px { height: 400px; }
.min-height-8em { min-height: 8em; }

/* Background color utilities */
.bg-aliceblue { background-color: aliceblue; }
.bg-silver { background-color: silver; }
.bg-888 { background-color: #888; }
.bg-aaa { background-color: #aaa; }
.bg-ccc { background-color: #ccc; }
.bg-eeeeee { background-color: #eeeeee; }

/* Border utilities */
.border-1px-solid-black { border: 1px solid black; }
.border-1px-solid-blue { border: 1px solid blue; }
.border-1px-solid-grey { border: 1px solid grey; }
.border-1px-solid-green { border: 1px solid green; }
.border-1px-solid-red { border: 1px solid red; }
.border-1px-solid-brown { border: 1px solid brown; }
.border-1px-solid-silver { border: 1px solid silver; }
.border-bottom-1px-solid-black { border-bottom: 1px solid black; }
.border-2px-solid-blue { border: 2px solid blue; }

/* Visibility utilities */
.visibility-hidden { visibility: hidden; }

/* Centered content utilities */
.centered-content { margin-left: auto; margin-right: auto; margin-top: 2em; margin-bottom: 2em; width: 96%; max-width: 90%; }
.centered-content-100 { margin-left: auto; margin-right: auto; margin-top: 2em; margin-bottom: 2em; width: 96%; max-width: 100%; }

/* Form field layout utilities */
.form-field-box { float: left; border: 1px solid grey; padding: 4px; margin: 2px; width: 9em; }
.form-field-box-blue { float: left; border: 1px solid blue; padding: 4px; margin: 2px; width: 7em; }
.form-field-box-green { float: left; border: 1px solid green; padding: 4px; margin: 2px; width: 6em; }
.form-field-box-red { float: left; border: 1px solid red; padding: 4px; margin: 2px; width: 3.2em; }
.form-field-box-brown { float: left; border: 1px solid brown; padding: 4px; margin: 2px; width: 9em; }
.form-field-box-silver { float: left; border: 1px solid silver; padding: 4px; margin: 2px; width: 4em; }

/* Display inline-block utilities */
.display-inline-block { display: inline-block; }

/* ========== Notification/Alert Utilities ========== */

.notification-success { color: green; background-color: #aaffaa; }
.notification-fail { color: red; background-color: pink; }
.notification-info { color: blue; background-color: skyblue; }

/* ========== Accordion/Package Card Utilities ========== */

.accordion-card-888 { width: 700px; height: 400px; background-color: #888; padding: 1em; }
.accordion-card-aaa { width: 700px; height: 400px; background-color: #aaa; padding: 1em; }
.accordion-card-ccc { width: 700px; height: 400px; background-color: #ccc; padding: 1em; }
.accordion-card-eeeeee { width: 700px; height: 400px; background-color: #eeeeee; }

.accordion-content { margin: 2em; margin-left: 4em; margin-right: 4em; }

/* ========== Password Reset Link Utilities ========== */

.password-reset-link {
    padding: 0;
    display: inline-block;
    width: 2.5em;
    text-decoration: none;
    background-color: silver;
    height: 2em;
    vertical-align: top;
}

/* ========== Base & Reset Styles ========== */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
}

/* ========== Header & Navigation ========== */
nav.navbar-top {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.5rem 0;
    position: relative;
    z-index: 1000;
}

nav.navbar-top .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo and Branding */
.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

/* Used 36 times */
div.logo {
    background-image: url('../../includes/img/memorize.live.logo.wide.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    height: 50px;
    width: 300px;
}

/* Used 2 times */
div.slogan {
    font-size: 1.125rem;
    color: #666;
    margin-left: 0.5rem;
    display: none; /* Hide on mobile, show on larger screens */
}

/* Navigation Links */
/* Used 26 times */
div.links ul.nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.75rem;
}

div.links ul.nav li {
    margin: 0;
}

/* ========== Main Content & Layout ========== */
div.body {
    flex: 1;
    width: 100%;
}

/* Content Stripes/Segments */
/* Used 74 times */
div.stripe {
    padding: 0;
    background-size: cover;
    background-position: center;
}

div.stripe:nth-child(odd) {
    background-color: #f5f5f5;
}

div.stripe:nth-child(even) {
    background-color: #ffffff;
}

/* Background fade overlay for images - always present */
/* Used 6 times */
div.stripe > .bg_fade {
    background-color: rgba(8, 17, 28, 0);
    background-image: linear-gradient(135deg, rgba(8, 17, 28, 0), rgba(3, 12, 24, 0));
    padding: 2rem 0;
    color: #333;
    text-shadow: none;
}

/* When stripe has background image, apply proper overlay */
div.stripe[style*="background-image"] > .bg_fade {
    background-color: rgba(8, 17, 28, 0.4);
    background-image: linear-gradient(135deg, rgba(8, 17, 28, 0.4), rgba(3, 12, 24, 0.3));
    color: #f8f9fa;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* For stripes without bg_fade (color backgrounds), add padding to container */
div.stripe:not([style*="background-image"]) > .container {
    padding: 2rem 1.5rem;
}

/* Legacy bg_fade for backward compatibility */
/* Used 6 times */
div.bg_fade {
    background-color: rgba(8, 17, 28, 0.4);
    background-image: linear-gradient(135deg, rgba(8, 17, 28, 0.4), rgba(3, 12, 24, 0.3));
    padding: 2rem 0;
    color: #f8f9fa;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

div.bg_fade a {
    color: #ffe08a;
    text-decoration: underline;
}

div.bg_fade a:hover {
    color: #ffba3b;
}

div.bg_fade .cta {
    color: #1f1f1f;
    text-decoration: none;
}

div.bg_fade .cta:hover {
    color: #1f1f1f;
    text-decoration: none;
}

/* Header banner stripe - offset to start 15% down the image */
div.stripe.header-banner {
    background-position: center 15%;
}

/* ========== Home Page Components ========== */
/* Home page hero - Intentionally retained (1 use): Semantic container for home page hero section */
.home-hero {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 500;
}

.home-hero p {
    margin: 0 0 1.5rem;
}

/* Intentionally retained (1 use): Semantic grid container for home page features */
.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Used 10 times on home page - feature card styling */
.home-feature {
    padding: 1.25rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.25);
    border: none;
    border-radius: 0px;
    gap: 0.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
}

.home-feature p {
    margin: 0;
}

/* Intentionally retained (2 uses): Semantic CTA section container on home page */
.home-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.home-hero-cta p {
    flex: 1 1 220px;
    margin: 0;
}

/* Used 3 times on home page - enhanced CTA button styling */
.home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(255, 152, 0, 0.35);
}

.home-cta:hover {
    box-shadow: 0 12px 28px rgba(255, 152, 0, 0.45);
}

/* ========== Footer ========== */
/* Intentionally retained (1 use): Semantic footer container with specific layout */
footer.footer {
    background-color: #343a40;
    background-image: url('../../includes/images/memorize_banner.jpg');
    background-size: cover;
    background-position: center 85%;
    color: #ffffff;
    padding: 1rem 0 0.5rem;
    margin-top: auto;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer div.logo {
    background-image: url('../../includes/img/memorize.live.logo.wide.tx.png');
    filter: invert(1);
    height: 25px;
    width: 125px;
}

/* Intentionally retained (1 use): Semantic footer navigation layout */
footer .footer-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3125rem;
    flex-wrap: wrap;
}

/* ========== Public Page Components ========== */
/* Used 13 times across multiple pages */
.bold {
    font-weight: bold;
}

/* Intentionally retained (1 use): Required for carousel component positioning */
.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

.item {
    display: block;
}

.quote {
    font-style: italic;
}

/* Intentionally retained (1 use): Semantic testimonial card component on about page */
.testimonial {
    background-color: #f8f9fa;
    border-left: 5px solid #007bff;
    padding: 1.5rem;
    margin: 1rem 0;
    font-style: italic;
}

/* ========== Consolidated Inline Style Utilities ========== */

/* Display utilities */
.display-none { display: none; }
.display-inline-block { display: inline-block; }
.visibility-hidden { visibility: hidden; }

/* Width utilities - layout containers */
.width-50pct-centered {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.width-96pct-centered {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}
.width-98pct-centered {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}

/* Margin utilities for centered containers */
.centered-margin-top-2em { margin-top: 2em; }
.centered-margin-bottom-2em { margin-bottom: 2em; }
.centered-margin-all-2em {
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
}

/* Combined centered form utilities */
.form-container-96 {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}
.form-container-98 {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}
.form-container-50 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}

/* Width utilities - specific dimensions */
.width-11em { width: 11em; }
.width-120px { width: 120px; }
.width-220px { width: 220px; }
.width-6em { width: 6em; }
.width-100pct { width: 100%; }

/* Height utilities */
.height-2px { height: 2px; }
.height-3em { height: 3em; }
.height-6em { height: 6em; }
.height-2em { height: 2em; }

/* Positioning utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-relative-top-neg-18px { position: relative; top: -18px; }
.position-relative-top-1em { position: relative; top: 1em; }
.position-absolute-left-0 { position: absolute; left: 0; }

/* Float with width combinations */
.float-left-width-49 { float: left; width: 49%; }
.float-left-width-6em-height-2em {
    float: left;
    width: 6em;
    height: 2em;
}

/* Margin utilities */
.margin-9px { margin: 9px; }
.margin-2em { margin: 2em; }
.margin-left-3em { margin-left: 3em; }
.margin-left-30px { margin-left: 30px; }
.margin-bottom-4em { margin-bottom: 4em; }
.padding-left-2em { padding-left: 2em; }
.padding-1em { padding: 1em; }

/* Font utilities */
.font-size-1-1em { font-size: 1.1em; }
.font-size-0-6em { font-size: 0.6em; }
.font-size-0-7em { font-size: 0.7em; }
.font-weight-1 { font-weight: 1; }

/* Border utilities */
.border-1px-solid-silver { border: 1px solid silver; }
.border-1px-solid-grey { border: 1px solid grey; }

/* Background color utilities - consolidated from inline styles */
.bg-silver { background-color: silver; }
.bg-pink { background-color: pink; }
.bg-green { background-color: green; }
.bg-efe { background-color: #efe; }
.bg-fee { background-color: #fee; }

/* List utilities */
.list-decimal { list-style-type: decimal; }
.list-decimal-inside {
    list-style-type: decimal;
    list-style-position: inside;
}

/* Max width/height utilities */
.max-width-300px { max-width: 300px; }
.max-height-300px { max-height: 300px; }
.max-width-height-300px {
    max-width: 300px;
    max-height: 300px;
}

/* Width calc utility */
.width-calc-minus-3em { width: calc(100% - 3em); }

/* Additional utilities from user.task.php */
.margin-right-4em { margin-right: 4em; }
.margin-left-9em { margin-left: 9em; }
.padding-top-4em { padding-top: 4em; }
.text-align-right { text-align: right; }
.color-999 { color: #999; }
.margin-bottom-12px { margin-bottom: 12px; }
.overflow-hidden { overflow: hidden; }
.position-relative-top-neg-0-1em { position: relative; top: -0.1em; }
.position-relative-top-neg-0-8em { position: relative; top: -0.8em; }
.font-size-3em { font-size: 3em; }
.width-0-5em { width: 0.5em; }

/* Footer utilities */
.footer-left-0 { left: 0; }

/* ========== Responsive Design ========== */
@media (min-width: 768px) {
    div.slogan {
        display: block;
    }
}

@media (max-width: 768px) {
    /* Header adjustments */
    nav.navbar-top { padding: 0.5rem 0; }
    
    nav.navbar-top .container {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0 1rem;
    }
    
    div.logo { width: 250px; height: 40px; }
    div.links ul.nav { flex-wrap: wrap; justify-content: center; }
    
    /* Content adjustments */
    div.stripe > .bg_fade { padding: 1.5rem 0; }
    div.stripe:not([style*="background-image"]) > .container { padding: 1.5rem 1rem; }
    
    /* Footer adjustments */
    footer .container { flex-direction: column; text-align: center; }
    footer .footer-links { justify-content: center; }
    
    /* Home page adjustments */
    .home-hero {
        max-width: 100%;
    }

    .home-hero p {
        font-size: 1.05rem;
    }
}

@media (max-width: 600px) {
    .home-feature-grid {
        grid-template-columns: 1fr;
    }

    .home-hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .home-cta {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    div.logo { width: 200px; height: 35px; }
    
    .btn, .cta {
        padding: 0.4rem 1rem;
        font-size: 1.35rem;
    }
    
    div.stripe > .bg_fade { padding: 1.5rem 0; }
    div.stripe:not([style*="background-image"]) > .container { padding: 1.5rem 1rem; }
}

/* ========== Verse Selector Styles ========== */

/* Prevent column breaks inside elements */
div { break-inside: avoid-column; -webkit-column-break-inside: avoid; }

/* Books list - already uses CSS columns */
div.blist {
    float: left;
    border: 1px solid black;
    margin: 2px;
    padding: 2px;
    clear: left;
    width: 95%;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
    -webkit-column-gap: 0.1em;
    -moz-column-gap: 0.1em;
    column-gap: 0.1em;
}

div.blist a > div {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: silver;
    border: 2px outset black;
    text-align: center;
    width: 8em;
    margin-top: 0px;
    margin-bottom: 4px;
}

/* Chapters container */
div.chapters {
    float: left;
    border: 1px solid black;
    margin: 2px;
    padding: 2px;
    clear: left;
    width: 95%;
}

/* Chapters list - supports both single and multi-column layouts */
div.clist {
    border: 1px solid black;
    margin: 2px;
    padding: 2px;
    width: 100%;
}

div.clist a > div {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: silver;
    border: 1px solid blue;
    text-align: center;
    width: 2em;
    margin-bottom: 4px;
    display: inline-block;
}

/* Verses container */
div.verses {
    float: left;
    border: 1px solid black;
    margin: 2px;
    padding: 2px;
    clear: left;
    width: 95%;
}

/* Verses list - supports both single and multi-column layouts */
div.vlist {
    border: 1px solid black;
    margin: 2px;
    padding: 2px;
    width: 100%;
}

div.vlist a > div {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: silver;
    border: 1px solid blue;
    text-align: center;
    width: 2em;
    margin-bottom: 4px;
    display: inline-block;
}

/* Responsive adjustments for verse selector */
@media (max-width: 768px) {
    div.blist, div.clist, div.vlist {
        width: 98%;
    }
    
    div.clist > div[style*="display: flex"],
    div.vlist > div[style*="display: flex"] {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    div.blist {
        -webkit-column-width: 120px;
        -moz-column-width: 120px;
        column-width: 120px;
    }
    
    div.blist a > div {
        width: 6em;
        font-size: 0.9em;
    }
    
    div.clist a > div,
    div.vlist a > div {
        width: 1.8em;
        font-size: 0.9em;
    }
}

/* ========== Numeric Selector Styles for Basic Interface ========== */

/* Numeric selector container */
div.numeric-selector {
    border: 1px solid black;
    margin: 2px;
    padding: 15px;
    width: 100%;
    background-color: #f8f9fa;
    border-radius: 4px;
}

/* Input group container */
div.numeric-input-group {
    margin-bottom: 15px;
}

div.numeric-input-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

/* Three-digit selector containers */
div.digit-selectors {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* Individual digit selector dropdowns */
select.digit-select {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: white;
    min-width: 60px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

select.digit-select.hundreds {
    min-width: 70px;
}

select.digit-select.tens {
    min-width: 60px;
}

select.digit-select.ones {
    min-width: 60px;
}

select.digit-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

select.digit-select:hover {
    border-color: #007bff;
}

/* Display showing the combined value */
div.digit-display {
    padding: 10px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    color: #495057;
    min-height: 20px;
    margin-bottom: 10px;
}

/* Continue button for digit selectors */
a.digit-continue {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    text-align: center;
}

a.digit-continue:hover {
    background-color: #0056b3;
    color: white;
    text-decoration: none;
}

a.digit-continue:active {
    background-color: #004085;
}

div.numeric-input-group input[type="number"] {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    width: auto;
    min-width: 80px;
    text-align: center;
    font-weight: bold;
    transition: border-color 0.3s ease;
}

div.numeric-input-group input[type="number"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

div.numeric-input-group input[type="number"]:invalid {
    border-color: #dc3545;
}

/* Continue button section */
div.continue-section {
    text-align: center;
    margin-top: 10px;
}

.continue-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.continue-btn.disabled {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
    border: 1px solid #ced4da;
}

.continue-btn.disabled:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: none;
    box-shadow: none;
}

.continue-btn.enabled {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    cursor: pointer;
    border: 1px solid #0056b3;
}

.continue-btn.enabled:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* Responsive adjustments for numeric selector */
@media (max-width: 768px) {
    div.numeric-selector {
        padding: 12px;
    }
    
    div.digit-selectors {
        gap: 8px;
    }
    
    select.digit-select {
        font-size: 18px;
        min-width: 70px;
        padding: 10px 8px;
    }
    
    select.digit-select.hundreds {
        min-width: 80px;
    }
    
    div.digit-display {
        font-size: 18px;
        padding: 12px;
    }
    
    div.numeric-input-group input[type="number"] {
        font-size: 18px;
        min-width: 100px;
    }
    
    .continue-btn {
        padding: 12px 24px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    div.numeric-selector {
        padding: 10px;
    }
    
    div.digit-selectors {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    select.digit-select {
        font-size: 16px;
        min-width: 60px;
        padding: 8px 6px;
    }
    
    select.digit-select.hundreds {
        min-width: 70px;
    }
    
    div.digit-display {
        font-size: 16px;
        padding: 10px;
        margin-top: 5px;
    }
    
    div.numeric-input-group label {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    div.numeric-input-group input[type="number"] {
        font-size: 16px;
        min-width: 80px;
        padding: 6px 10px;
    }
    
    .continue-btn {
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
    }
}