body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

html {
    background: #95938f;
    background-image: url("../images/a.png");
    background-repeat: repeat-x;
}

        .error-message {
            color: red;
            font-weight: bold;
        }

.abutton { /* Changed abutton to .abutton to follow class syntax */
    padding: 12px 12px;
    margin: 5px 5px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background: slategrey;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    transition: opacity 0.4s ease, background-color 0.4s ease;
}

.abutton:hover {
    background: steelblue;
    transition: 0.3s;
}

.oldmybutton {
    text-align: center;
    padding: 12px 12px;
    margin: 5px 5px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background: slategrey;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    text-decoration: none;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    transition: all 0.2s linear 0s;
    padding-right: 30px;
}


.mybutton {
    text-align: center;
    padding: 12px 12px;
    margin: 5px 5px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background: slategrey;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    text-decoration: none;
    vertical-align: middle;
    position: relative;
    color: #ffffff;
    position: relative;
    display: inline-block;
}

.mybutton::after,
.mybutton::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, slategrey, #00ffff);
  bottom: 5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

.mybutton::before {
  top: 5px;
  transform-origin: left;
  background: linear-gradient(to left, slategrey, #00ffff);
}

.mybutton:hover::after,
.mybutton:hover::before {
  transform: scaleX(0.98);
}
.oldmybutton.buttonhover {
    transition: all 0.3s ease;
}

.oldmybutton.buttonhover::before {
    content: "=>";
    font-size: 16px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    height: 100%;
    width: 30px;
    background-color: steelblue;
    color: white;
    right: -30px;
    opacity: 0;
    transition: right 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.oldmybutton.buttonhover:hover {
    background-color: steelblue;
    text-indent: 0px;
}

.oldmybutton.buttonhover:hover::before {
    right: 0px;
    opacity: 1;
}

/* Remove number input arrows in Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove number input arrows in Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.filter-form select,
.filter-form input[type="number"],
.filter-form input[type="text"] {
    width: 55%;
    padding: 10px;
    margin: 10px 0;
    font-size: 1rem;
    box-sizing: border-box;
}

.filter-form .form-group {
    display: flex;
    align-items: center;
    row-gap: 10px;
    column-gap: 0px;
}

.faqDiv {
    margin-right: auto;
    margin-left: auto;
    display: inline-block;
    max-width: 800px;
}
.faqQuestionContainer {
    text-align: left;
    margin: 10px 5% 0px 5%;
    display: block;
    cursor: pointer;
    color: black;
    background-color: silver;
    padding-bottom: 10px;
    FONT-SIZE: 1.2EM;
}
.faqQuestionContainer:hover {
    background-color: powderblue;
}
.faqImage {
    vertical-align: middle;
}
.faqAnswerContainer {
    text-align: left;
    overflow: hidden;
    height: 0px;
    margin: 0px 5% 0px 5%;
    color: black;
    background-color: silver;
    padding: 0px 10px 0px 10px;
    FONT-SIZE: 1.2EM;
}
.faqAnswerContainer:hover {}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.rock-card {
    border: 1px solid black;
    border-radius: 10px;
    background: silver;
    padding: 5px; /* Fixed typo from 'padding 5px' to 'padding: 5px;' */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    text-decoration: none;
    position: relative;
    width: auto;
    overflow: hidden;
}

.rock-card:hover {
    border: 1px solid steelblue;
}

.rock-card img {
    max-width: 100%;
    max-height: 300px;
    object-fit: cover;
    transition: transform 1s ease;
    border: none;
}

.rock-card img:hover {
    transform: scale(1.08);
}

.rock-info {
    padding: 2px;
    margin: 0; /* Fixed 'none' to '0' for margin */
}

.rock-info h3 {
    font-size: 1.1em;
    margin: 0;
}

.rock-card a {
    border: none;
}

.rock-info p {
    font-size: 0.9em;
    color: #555;
    margin: 0;
}

.rock-info .id {
    color: black;
    margin-right: 20px;
}

.rock-info .price {
    color: black;
    margin-left: 20px;
}
.rock-info .shortdesc {
    color: blue;
    clear: both;
}
.rock-info .locality {
    color: black;
}

.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a {
    text-decoration: none;
    padding: 10px 15px;
    background-color: darkgray;
    color: white;
    margin: 0 5px;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: steelblue;
}

.pagination .active {
    background-color: black;
}

.pageList {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    margin-top: 20px;
}
.pageNumber, .currentPage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 25px;
}
.pageNumber:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}
.currentPage {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.currentPage:hover {
    cursor: pointer;
}
.ellipsis {
    padding: 0 5px;
    font-size: 0.9em;
}
.navButtons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.navButtons input[type="button"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    font-size: 20px;
    background-color: steelblue;
}
.navButtons input[type="button"]:hover {
    background-color: #eee;
}
.navButtons .currPage {
    font-size: 1em;
}

#spaContainer {
    position: relative;
    width: 100%;
    transition: height 0.5s ease-in-out;
}

#spaContent {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.5s ease-in-out;
}

#spaContent.fade-out {
    opacity: 0;
}

#spaContent.fade-in {
    opacity: 1;
}

/* Your messageBox can now be a simple, non-animating container */
.messageBox {
    margin-left: auto;
    margin-right: auto;
    background: silver;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1.5);
    padding: 20px;
    margin-top: 20px;
}

/* css for search.php */
        /* Add some basic styling for the form */
        .searchForm {
            max-width: 500px;
        }

        .searchLabel {
            width: 35%;
            padding: 10px;
            margin: 10px 0;
            text-align: right;
        }
        .searchForm select {
            width: 55%;
            padding: 10px;
            margin: 10px 0;
        }
        .searchForm button {
            margin: 10px 0;
        }

        .searchForm button {
            background-color: #3498db;
            color: white;
            border: none;
            cursor: pointer;
        }

        .searchForm button:hover {
            background-color: #2980b9;
        }

/* css for MineralMovies animation */
        .word-animation {
            margin: auto;
            width: 500px;
            max-width: 500px;
            height: 200px;
            display: flex; /* Centers the letters */
            justify-content: center;
            align-items: flex-start;
        }

        /* Styles for each letter */
        .letter {
            stroke: steelblue;
            stroke-width: 1.5;
            fill: steelblue;
            /* Animation starts from off-screen */
            transform: translateY(-200px);
            /* This is the key to the animation! */
            animation: bounceIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
        }

        /* The fix: target the .letter class within the specific .word-animation div */
        /* Stagger the animation of each letter for the first word */
        .word-animation.firstWord .letter:nth-child(1) { animation-delay: 0.1s; }
        .word-animation.firstWord .letter:nth-child(2) { animation-delay: 0.2s; }
        .word-animation.firstWord .letter:nth-child(3) { animation-delay: 0.3s; }
        .word-animation.firstWord .letter:nth-child(4) { animation-delay: 0.4s; }
        .word-animation.firstWord .letter:nth-child(5) { animation-delay: 0.5s; }
        .word-animation.firstWord .letter:nth-child(6) { animation-delay: 0.6s; }
        .word-animation.firstWord .letter:nth-child(7) { animation-delay: 0.7s; }

        .word-animation.firstWord .letter:nth-child(8) { animation-delay: 0.4s; }
        .word-animation.firstWord .letter:nth-child(9) { animation-delay: 0.6s; }
        .word-animation.firstWord .letter:nth-child(10) { animation-delay: 0.7s; }
        .word-animation.firstWord .letter:nth-child(11) { animation-delay: 0.8s; }
        .word-animation.firstWord .letter:nth-child(12) { animation-delay: 0.9s; }
        .word-animation.firstWord .letter:nth-child(13) { animation-delay: 1.0s; }

        /* Stagger the animation of each letter for the second word */
        .word-animation.secondWord .letter:nth-child(1) { animation-delay: 0.3s; }
        .word-animation.secondWord .letter:nth-child(2) { animation-delay: 0.4s; }
        .word-animation.secondWord .letter:nth-child(3) { animation-delay: 0.1s; }
        .word-animation.secondWord .letter:nth-child(4) { animation-delay: 0.6s; }
        .word-animation.secondWord .letter:nth-child(5) { animation-delay: 0.2s; }
        .word-animation.secondWord .letter:nth-child(6) { animation-delay: 0.8s; }

        /* Keyframe animation for the bounce effect */
        @keyframes bounceIn {
            0% { transform: translateY(-200px); }
            100% { transform: translateY(0); }
        }


/* css for moments.php */
        .moments-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 0px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .moments-box {
            flex: 0 1 280px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
            background-color: #f9f9f9;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .moments-box a {
            color: inherit;
            text-decoration: none;
        }
        .moments-box img {
            width: 100%;
            height: auto;
            display: block;
        }

        .moments-button {
            color: white;
            font-size: 1.1em;
            padding: 10px;
            background: linear-gradient(to bottom, steelblue, slategray);
            border-radius: 8px 8px 8px 8px;
            box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
            text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
            width: 80%;
            position: relative;
            top: -10px;
            margin: auto;
        }


/* css for exquisite.php */
        .exqcontainer {
            width: 600px;
            height: 400px;
            background-color: black;
            overflow: hidden;
            margin-inline: auto;
        }

        .split-container-top {
            display: flex;
            height: 100%;
        }

        .split-half {
            width: 50%;
            height: 100%;
            overflow: hidden;
            border: none;
            position: relative;
            transition: transform 0.5s ease-in-out; /* Transition for the split halves */
        }

        .left-half {
            border-right: none;
        }

        .right-half {
            border-left: none;
        }

        .slide-out-left {
            transform: translateX(-100%);
        }

        .slide-out-right {
            transform: translateX(100%);
        }

        .split-half img {
            height: 100%;
        }
        
        .exquisite-caption {
            text-align: center;
            margin-top: 20px;
        }


/* css for albums.php */
        .album-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }
        .album {
            width: 200px;
            text-align: center;
            cursor: pointer;
        }
        .album img {
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .album-title {
            margin-top: 10px;
            font-size: 1.2em;
            color: #333;
        }

/* css for viewcart.php */

    <style>
        .cart-table {
            width: 100%;
        }
        .itemWrapper {
            width: 98%;
            margin: auto;
            text-align: center;
        }  
        .cartImage {
            margin: auto;
        }
        .cartDescription {
            margin: 0;
        }
        .modal-button {
            padding: 10px 20px;
            margin: 10px;
            cursor: pointer;
            color: white;
            border: none;
            border-radius: 5px;
        }
        .cancel-button {
        }

    /* Modal background */
    #confirmationModal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);  /* Darken the background */
        transition: opacity 0.8s ease;  /* Smooth transition */
    }

    /* Modal content styling */
    .modal-content {
        background-color: silver;
        margin: 10% auto; /* Adjusted for a better position */
        padding: 30px;
        border-radius: 8px;
        max-width: 300px; /* Decreased width to make it more centered */
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
        animation: fadeIn 0.6s ease; /* Animation for smoother appearance */
    }

    /* Animating the modal fade-in */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Modal message styling */
    .modal-content p {
        font-size: 18px;
        color: #333;
        margin-bottom: 20px;
    }

    #itemDetails {
        font-weight: bold;
        margin-bottom: 20px;
    }

    /* Modal buttons */
    .modal-button {
        padding: 12px 25px;
        margin: 15px 10px;
        font-size: 16px;
        cursor: pointer;
        border: none;
        border-radius: 8px;
        transition: background-color 0.8s ease;
    }

    /* Remove button style */
    .modal-button {
    }

    /* Cancel button style */
    .cancel-button {
    }

    .modal-button:hover {
        opacity: 0.8; /* Add hover effect */
    }

    .cancel-button:hover {
    }










/* css for labelmaker.php */
        .lmGroup {
            margin-bottom: 5px;
        }
        .lmGroup label {
            flex: 1;
            text-align: right;
            display: inline-block;
            width: 80%;
            text-align: right;
            padding-right: 10px;
        }
        .lmGroup input {
            flex: 1;
            width: 50px;
            padding: 4px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .lmGroup select {
            width: 60px;
            padding: 4px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

    .exampleLabel {
        background-image: url('images/thumbnailBackground.jpg');
        background-position: top center;
        background-repeat: no-repeat;
        display: inline-grid;
        flex-direction: column;
        float: left;
        margin: 0;
        margin-left: 3mm;
        margin: auto;
        color: black;
        padding: 0.6%;

        width: 48mm;
        min-width: 48mm;
        max-width: 48mm;

        min-height: 35mm;

        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background-color: white;
        font-size: 14px;
        border: 1px solid black;
    }
    .exampleLabel .header {
        flex-shrink: 0;
    }
    .exampleLabel .footer {
        flex-shrink: 0;
    }
    .exampleLabel .desc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        flex-grow: 1;
    }
    .exampleLabel .species {
        color: black;
    }
    .exampleLabel .locality {
        color: black;
    }
    .exampleLabel .itemno {
        display: inline;
        float: left;
        text-align: left;
        color: blue;
    }
    .exampleLabel .price {
        display: inline;
        float: right;
        text-align: right;
        color: blue;
    }
    .exampleLabel .collection {
        display: block;
        align-self: flex-end;
        text-align: right;
        margin: 0px;
        color: blue;
        font-style: italic;
        overflow: hidden;
        line-spacing: 1;
    }
    .exampleLabel .cutline {
        font-size: x-small;
        height: 4mm;
        max-height: 4mm;
        min-height: 4mm;
        width: 50%;
        min-width: 50%;
        max-width: 50%;
        display: block;
    }
    .exampleLabel .clearboth {
        height: 0px;
        clear: both;
    }
    P.breakhere {
        margin: 0px;
        padding: 0px;
        display: block;
        clear: both;
        page-break-after: always
    }
    .crystal_background {
        background-image: url('images/thumbnailBackground.jpg');
    }

    /* CSS for two-column layout */
    .lmcontainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px; /* Adjust as needed */
    }

    .lmcolumn {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Align labels and inputs to the right within each column */
    }

    .lmcolumn label {
        width: 100%; /* Make labels take full width for consistent alignment */
        text-align: right;
    }

    .lmbuttons {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center buttons horizontally */
        margin-top: 20px;
    }
    .lmbuttons input, .lmbuttons button {
        margin-top: 10px; /* Space between the file input and the submit button */
        width: 250px; /* Set a consistent width for both buttons */
    }

/* CSS for movie.php */
        .movie-desc {
            color: white;
            margin: auto;
            width: 280px;
            font-size: 1.2em;
            padding: 2px;
            border-radius: 8px;
            position: relative;
            top: -10px;
            background:-webkit-linear-gradient(top, steelblue, slategray);
            box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
            text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
        }



/* CSS for getemail-content.php */
        .contactlabel {
            width: 120px;
            text-justify: right;
        }

        .contact-info {
            background-color: silver;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 250px;
            margin: auto;
        }

        .contact-info p {
            font-family: 'Arial', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            margin: 10px 0;
        }

        .contact-info p strong {
            color: #444;
        }

        .contact-info a {
            color: #007bff;
            text-decoration: none;
        }

        .contact-info a:hover {
            text-decoration: underline;
        }

/* CSS for rock-content.php */
.rock-container {
  max-width: 90vw;

  margin: auto;
  background: silver;
  border-radius: 12px;
  box-shadow: 0 4px 8px black;
  padding: 10px;
}
.rock-details {
  background: silver;
}
.rock-itemno {
    display: inline-block;
    min-width: 70px;
    font-size: 1.5em;
    vertical-align: 0.5em;
    text-align: right;
    margin-right: 15px;
}
.rock-price {
    display: inline-block;
    min-width: 70px;
    font-size: 1.5em;
    vertical-align: 0.5em;
    text-align: right;
    margin-left: 15px;
}
.rock-shortdesc {
    color: blue;
}
.rock-locality {
    color: black;
}





/* CSS for getshipping-content.php */
    .shipping-form-container {
        background-color: silver;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 600px; /* Adjust as needed */
        margin: 20px auto;
        text-align: left;
    }

    /* Styles for individual form rows (label + input/group) */
    .form-row {
        /* These styles remain unchanged from your original code */
        /* They manage the overall row layout and the input-group behavior */
        display: flex; /* Keeping this to maintain label-input-group alignment */
        align-items: baseline;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .form-row label {
        /* These styles remain unchanged from your original code */
        flex: 0 0 auto;
        width: 120px;
        margin-right: 10px;
        text-align: right;
        font-weight: bold;
        padding-right: 5px;
        box-sizing: border-box;
    }
    /* Group of inputs on the same line */
    .input-group {
        /* These styles remain unchanged from your original code */
        display: flex; /* This is crucial for name/city-state grouping */
        flex-wrap: wrap;
        flex-grow: 1;
        gap: 10px; /* Space between inputs in a group */
    }
    .input-group input[type="text"],
    .form-row input[type="text"],
    .form-row select {
        /* These styles remain unchanged from your original code */
        padding: 8px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        min-width: 80px; /* Minimum width for small inputs */
        flex: 1 1 auto; /* Added flex properties back for inputs */
    }
    
    /* Adjust specific input widths within groups */
    .input-group input[name="first_name"],
    .input-group input[name="last_name"] {
        /* These styles remain unchanged from your original code */
        max-width: 100px; /* This was in your provided code, keeping it */
        flex: 1 1 calc(50% - 5px); /* Re-added flex for better half-width */
    }

    .input-group input[name="city"] {
        /* These styles remain unchanged from your original code */
        max-width: 125px; /* This was in your provided code, keeping it */
        flex: 2 1 150px; /* Re-added flex for better sizing */
    }
    .input-group input[name="state"] {
        /* These styles remain unchanged from your original code */
        max-width: 125px; /* This was in your provided code, keeping it */
        flex: 1 1 80px; /* Re-added flex for better sizing */
    }

    /* Full width for address lines */
    .form-row input[name="street1"],
    .form-row input[name="street2"] {
        /* These styles remain unchanged from your original code */
        max-width: 200px; /* Adjust for label width + margin */
        flex-grow: 1; /* Re-added flex for better sizing */
    }

    .form-row input[name="company"] {
        /* These styles remain unchanged from your original code */
        max-width: 200px; /* Make these wider too */
        flex-grow: 1; /* Re-added flex for better sizing */
    }

    .form-row select[name="country"] {
        /* These styles remain unchanged from your original code */
        max-width: 125px; /* Make these wider too */
        flex-grow: 1; /* Re-added flex for better sizing */
    }

    .form-row input[name="postal_code"] {
        /* These styles remain unchanged from your original code */
        max-width: 50px; /* Make these wider too */
        flex-grow: 1; /* Re-added flex for better sizing */
    }


    /* Styles for the button */
    .shipping-form-container button {

        margin-left: auto;
        margin-right: auto;
    }

    /* Styles for recent addresses selector (MODIFIED) */
    .address-option {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        cursor: pointer;
        background-color: #f9f9f9;
        float: left; /* Keep this to float them horizontally */
        margin-left: 10px; /* Keep this for spacing between options */
        width: calc(33.333% - 13.333px); /* Adjusted width to fit 3 in a row with margin-left of 10px */
        box-sizing: border-box; /* Crucial for width calculation with padding/border */
        min-width: 180px; /* Prevents options from becoming too small */
    }
    .address-option:hover {
        background-color: #e9e9e9;
    }
    .address-option strong {
        display: block;
        margin-bottom: 5px;
    }
    .address-option p {
        margin: 2px 0;
        font-size: 0.9em;
    }
    .address-selector {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #e6f7ff;
        border: 1px solid #b3e0ff;
        border-radius: 8px;
        /* --- FIX: Clearfix for containing floats --- */
        overflow: hidden; /* This creates a new block formatting context, containing floats */
        /* Alternatively, you can use a more explicit clearfix if overflow: hidden causes issues: */
        /*
        &::after {
            content: "";
            display: table;
            clear: both;
        }
        */
    }
    .address-selector h3 {
        margin-top: 0;
        text-align: center;
        color: #0056b3;
    }

    /* Responsive adjustments */
    @media (max-width: 280px) { /* Changed from 300px to 600px for better mobile responsiveness */
        .form-row {
            flex-direction: column; /* Stack label and input group */
            align-items: flex-start;
        }
        .form-row label {
            width: 100%;
            text-align: left;
            margin-bottom: 5px;
            margin-right: 0;
        }
        .input-group {
            width: 100%;
            flex-direction: column; /* Stack inputs within a group on small screens */
            gap: 5px; /* Reduce gap when stacking */
        }
        .input-group input[type="text"],
        .input-group select {
            flex: 1 1 100%; /* Take full width when stacked */
            max-width: 100%;
        }
        .form-row input[name="street1"],
        .form-row input[name="street2"],
        .form-row input[name="company"],
        .form-row select[name="country"],
        .form-row input[name="postal_code"] {
            max-width: 100%;
        }

        /* Responsive adjustments for address options */
        .address-option {
            float: none; /* Remove float for stacking */
            width: 90%; /* Take almost full width when stacked */
            margin: 0 auto 15px auto; /* Center and add vertical margin */
        }
    }