/* ===========================
   Shared layout for 2-column features
   =========================== */
.feature-layout {
    margin: 20px auto;
    border-collapse: separate;
    border-spacing: 30px 0; /* space between columns */
}

.feature-col {
    text-align: center;
    vertical-align: top;
}

/* Headings above each box or panel */
.feature-heading,
.feature-panel-title {
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #6C491D;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-align: center;
}

/* ===========================
   BASE card / panel look
   =========================== */
.feature-box,
.feature-panel {
    border: 2px solid #6C491D;
    border-radius: 10px;
    background: #FBF8F3;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
}

/* Small cards (PayPal, QR, etc.) */
.feature-box {
    text-align: center;
    transition: box-shadow 0.2s ease,
                transform 0.2s ease,
                border-color 0.2s ease,
                background 0.2s ease;

    max-width: 280px;   /* common width for ALL feature cards */
    margin: 0 auto;     /* center inside the cell */
}

.feature-box td {
    padding: 20px;
}

/* Hover effect for cards */
.feature-box:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    transform: translateY(-2px);
    border-color: #4F3615;
    background: #F3EBDD;
}

/* Full-width information panel (ex-contact-panel) */
.feature-panel {
    margin: 20px auto 15px auto;
    padding: 12px 18px;
    width: 90%;
    text-align: left;
}

/* Lists and links inside the info panel */
.feature-panel ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.feature-panel li {
    margin-bottom: 4px;
}

.feature-panel a {
    color: #6C491D;
    font-weight: 600;
    text-decoration: none;
}

.feature-panel a:hover {
    text-decoration: underline;
}

/* Small descriptive note below images/buttons */
.feature-note {
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 0.85em;
    color: #444;
    margin-top: 8px;
}

/* Centered images inside feature boxes */
.feature-image {
    display: block;
    margin: 0 auto;
}

/* Wrapper for single wide cell in a table */
.feature-single-wrapper {
    max-width: 280px;    /* adjust if needed */
    margin: 0 auto;      /* centers within the colspan cell */
}

.spotlight-box {
    text-align: center;
    color: #6C491D;
    background: #F3EBDD;
    border: 2px solid #6C491D;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 25px auto 20px auto;
    width: 90%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
}

.spotlight-box-red {
    text-align: center;
	color: #8B0000;
    background: #FDECEC;
    border: 2px solid #8B0000;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 25px auto 20px auto;
    width: 90%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
}

/* Enhanced, clean terminology/reference table */
.nice-table {
    width: 95%;
    margin: 20px auto 30px auto;
    border-collapse: collapse;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1em;
}

/* Header row */
.nice-table thead th {
    padding: 10px 12px;
    background-color: #F3EBDD;   /* warm cream */
    color: #6C491D;              /* brown accent */
    border-bottom: 2px solid #6C491D;
    text-align: left;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Term column */
.nice-table td.term-name {
    width: 20%;
    padding: 10px 12px;
    font-weight: 600;
    color: #6C491D;
    vertical-align: top;
    white-space: nowrap;
}

/* Definition column */
.nice-table td.term-definition {
    width: 80%;
    padding: 10px 12px;
    vertical-align: top;
}

/* Definition paragraph spacing */
.nice-table td.term-definition p {
    margin: 0;
    text-align: justify;
}

/* Alternating row striping */
.nice-table tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}

.nice-table tbody tr:nth-child(even) {
    background-color: #FBF8F3;
}

/* Hover highlighting */
.nice-table tbody tr:hover {
    background-color: #FFF4DE;
}