/* CSS for Frontend Calculator */

.wcfc-wrapper {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}

.wcfc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.wcfc-field {
    flex: 1;
    min-width: 140px;
}

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

.wcfc-field input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.wcfc-field select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /* Ensure padding doesn't affect width calc */
}

/* Specific Centering for Gate Fields */
.wcfc-gates .wcfc-field {
    text-align: center;
}

.wcfc-gates .wcfc-field label {
    text-align: center;
}

/* Gate Layout */
.wcfc-gate-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    /* Align inputs to bottom */
    justify-content: center;
    /* Center the inputs within the column */
}

.wcfc-gate-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center sublabels */
}

.wcfc-sublabel {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 3px;
    font-weight: normal;
    display: block;
    width: 100%;
    text-align: center;
}

/* Qty Column */
.wcfc-gate-col input {
    width: 80px !important;
    /* Wide enough for 3 digits */
    text-align: center;
    padding: 5px !important;
    /* Reduce padding slightly to prevent cutoff */
}

/* Width Column */
.wcfc-gate-width {
    flex: 0 1 auto;
    /* Don't force grow, just fit content + max-width */
}

/* Constrain the Width Select */
.wcfc-gate-width select {
    width: 100%;
    min-width: 120px;
    max-width: 200px;
}

/* =========================================
   ADMIN ADMIN LAYOUT INDEPENDENT STYLES
   ========================================= */

.wcfc-admin-layout {
    max-width: 1200px;
    /* Wide Admin View */
    width: 95%;
    /* Use most of the screen */
    margin: 20px auto;
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Ensure flex rows behave nicely */
.wcfc-admin-layout .wcfc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 25px;
    justify-content: center;
    /* Center items if they don't fill row */
}

/* Force Gaps in Gate Wrapper */
.wcfc-admin-layout .wcfc-gate-wrapper {
    gap: 30px !important;
}

/* Robust Input Sizing */
.wcfc-admin-layout .wcfc-gate-col input {
    width: 100px !important;
    min-width: 100px !important;
    font-size: 15px !important;
    /* Larger text */
    padding: 8px !important;
}

/* Increase General Font Size in Admin */
.wcfc-admin-layout label {
    font-size: 15px !important;
    margin-bottom: 8px;
}

.wcfc-admin-layout select,
.wcfc-admin-layout input {
    font-size: 14px !important;
    height: 40px !important;
}

/* Button in Admin */
.wcfc-admin-layout .wcfc-calc-btn {
    max-width: 350px;
    margin-top: 30px;
    font-size: 18px;
    padding: 15px;
}

.wcfc-calc-btn {
    display: block;
    /* Ensure it respects margin auto */
    width: auto;
    max-width: 400px;
    /* Not full width, but substantial */
    margin: 20px auto;
    /* Center it */
    padding: 20px 40px;
    /* Taller and wider touch area */
    background-color: #0073aa !important;
    color: #fff !important;
    border: 1px solid #005177;
    border-radius: 8px;
    /* More rounded */
    cursor: pointer;
    font-size: 24px;
    /* Bigger Font */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    /* Stronger shadow/depth */
    transition: all 0.2s ease;
}

.wcfc-calc-btn:hover {
    background-color: #005177 !important;
    transform: translateY(2px);
    /* Press down effect */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.wcfc-results {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.wcfc-results th,
.wcfc-results td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.wcfc-results th {
    background-color: #eee;
}

.wcfc-add-cart-btn {
    width: 100%;
    padding: 12px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
}

.wcfc-add-cart-btn:hover {
    background-color: #218838;
}

/* Centered Style Selection */
.wcfc-step {
    text-align: center;
    margin-bottom: 20px;
}

.wcfc-step label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.wcfc-step select {
    width: 60%;
    /* Not full width, looks better centered */
    min-width: 250px;
    margin: 0 auto;
    /* Center the box itself */
    display: block;
    padding: 10px;
    text-align: center;
    /* Tries to center text inside, browser support varies */
}