/* ==========================================================================
   SYDENHAMS SHARED COMPONENT LIBRARY
   ==========================================================================
   Provides consistent styling for all modules and content pages.
   Load this ONCE in the skin (via AddFiles.ascx or DNN stylesheet settings).

   Prefix: .syd-  (avoids conflicts with Bootstrap, DNN, and module-specific classes)

   All modules should migrate from their prefixed classes (laminate-btn-primary,
   cnc-btn-primary, shaker-btn-primary, cl-btn, etc.) to these shared classes.

   Colours reference the CSS variables defined in portal.css :root
   ========================================================================== */


/* ==========================================================================
   0. PAGE HERO — Inner page header banner
   Standardised gradient header for all inner pages.
   Usage:
     <div class="syd-page-hero">
       <div class="syd-page-hero-inner">
         <h1>Page Title</h1>
         <p>Short description</p>
       </div>
     </div>
   ========================================================================== */

.syd-page-hero {
    background: linear-gradient(135deg, var(--syd-dark-blue, #2d4c72) 0%, var(--syd-primary, #0071b9) 100%);
    color: #fff;
    text-align: center;
    padding: 60px 24px;
    margin-top: 16px;
}

.syd-page-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.syd-page-hero h1 {
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    margin: 0 0 14px;
    color: #fff;
}

.syd-page-hero p {
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
}

@media screen and (max-width: 768px) {
    .syd-page-hero {
        padding: 40px 16px;
    }
}


/* ==========================================================================
   0b. CTA BANNER — Reusable call-to-action strip
   Full-width gradient bar with text and button, used across multiple pages.
   Usage:
     <div class="syd-cta-banner">
       <div class="syd-cta-banner-inner">
         <div class="syd-cta-banner-text">
           <h3>Heading</h3>
           <p>Short description</p>
         </div>
         <a class="syd-btn syd-btn-cta" href="/cut-list">Enter My Cut List</a>
       </div>
     </div>
   ========================================================================== */

.syd-cta-banner {
    background: linear-gradient(135deg, var(--syd-dark-blue, #2d4c72) 0%, var(--syd-primary, #0071b9) 100%);
    padding: 32px 24px;
    margin: 0;
}

.syd-cta-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.syd-cta-banner-text h3 {
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.syd-cta-banner-text p {
    font-size: clamp(0.88rem, 2vw, 1rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}


/* ==========================================================================
   1. MODULE WRAPPER
   ========================================================================== */

.syd-module {
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--syd-text-body, #424242);
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}

.syd-module-wide {
    max-width: 1200px;
}


/* ==========================================================================
   2. HEADINGS & TITLES
   ========================================================================== */

/* Page / module title - replaces .laminate-enquiry-title, .shaker-enquiry-title,
   .cnc-form-header h2, .cl-h, etc. */
.syd-module-title {
    color: var(--syd-text-dark, #363e4c);
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    font-style: italic;
    margin: 0 0 8px 0;
    padding: 0;
}

/* Subtitle / description beneath title */
.syd-module-subtitle {
    color: var(--syd-text-body, #424242);
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    margin: 0 0 25px 0;
}

/* Section heading within a module - replaces .laminate-admin-title, etc. */
.syd-section-title {
    color: var(--syd-text-dark, #363e4c);
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 16px 0;
}

/* Module header block with bottom border - replaces .cnc-form-header */
.syd-module-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--syd-primary, #0071b9);
}

.syd-module-header .syd-module-title {
    margin-bottom: 8px;
}

.syd-module-header p {
    color: var(--syd-text-body, #424242);
    margin: 0;
}


/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

/* Base button - replaces .laminate-btn, .cnc-btn, .shaker-btn, .cl-btn */
.syd-btn {
    display: inline-block;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    font-weight: 500;
    line-height: 1.2;
    padding: 10px 24px;
    min-width: 140px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
	text-transform: uppercase;
	letter-spacing: 0.03em
}

.syd-btn:hover {
    text-decoration: none;
}

/* Primary button - Sydenhams Blue */
.syd-btn-primary {
    color: #fff;
    background: var(--syd-primary, #0071b9);
    border-color: var(--syd-primary, #0071b9);
}

.syd-btn-primary:hover {
    background: var(--syd-mid-blue, #32567d);
    border-color: var(--syd-mid-blue, #32567d);
    color: #fff;
}

/* Secondary button - Dark Blue */
.syd-btn-secondary {
    color: #fff;
    background: var(--syd-dark-blue, #2d4c72);
    border-color: var(--syd-dark-blue, #2d4c72);
}

.syd-btn-secondary:hover {
    background: #1a3452;
    border-color: #1a3452;
    color: #fff;
}

/* CTA / Utility button - Green (use sparingly, per brand guidelines) */
.syd-btn-cta {
    color: #fff;
    background: var(--syd-green, #8dc263);
    border-color: var(--syd-green, #8dc263);
}

.syd-btn-cta:hover {
    background: #7ab352;
    border-color: #7ab352;
    color: #fff;
}

/* Outline button - for secondary actions */
.syd-btn-outline {
    color: var(--syd-primary, #0071b9);
    background: transparent;
    border-color: var(--syd-primary, #0071b9);
}

.syd-btn-outline:hover {
    color: #fff;
    background: var(--syd-primary, #0071b9);
}

/* Danger button - for destructive actions */
.syd-btn-danger {
    color: #fff;
    background: #c0392b;
    border-color: #c0392b;
}

.syd-btn-danger:hover {
    background: #a5281b;
    border-color: #a5281b;
    color: #fff;
}

/* Small button variant */
.syd-btn-sm {
    padding: 6px 14px;
    font-size: 0.875rem;
    min-width: 80px;
}

/* Full-width button */
.syd-btn-block {
    display: block;
    width: 100%;
}

/* Disabled state */
.syd-btn:disabled,
.syd-btn[disabled],
.syd-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button row / group */
.syd-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.syd-btn-row-center {
    justify-content: center;
}

.syd-btn-row-right {
    justify-content: flex-end;
}

/* Visited state for link-buttons */
.syd-btn-primary:visited,
.syd-btn-secondary:visited,
.syd-btn-cta:visited,
.syd-btn-danger:visited {
    color: #fff;
}

.syd-btn-outline:visited {
    color: var(--syd-primary, #0071b9);
}


/* ==========================================================================
   4. FORM LAYOUT
   ========================================================================== */

/* Form row - replaces .laminate-form-row, .cnc-form-row, .shaker-form-row */
.syd-form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Form group - replaces .laminate-form-group, .cnc-form-group, .shaker-form-group */
.syd-form-group {
    margin-bottom: 16px;
    flex: 1 1 100%;
}

/* Column widths */
.syd-col-half {
    flex: 1 1 calc(50% - 10px);
    min-width: 250px;
}

.syd-col-third {
    flex: 1 1 calc(33.333% - 14px);
    min-width: 200px;
}

.syd-col-quarter {
    flex: 1 1 calc(25% - 15px);
    min-width: 160px;
}

.syd-col-full {
    flex: 1 1 100%;
}


/* ==========================================================================
   5. LABELS
   ========================================================================== */

/* Standard label - replaces .laminate-label, .cnc-label, .shaker-label */
.syd-label {
    display: block;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--syd-text-dark, #363e4c);
    margin-bottom: 5px;
}

/* Required asterisk - replaces .laminate-required, .cnc-required-indicator, etc. */
.syd-required {
    color: #d32f2f;
    font-weight: 700;
}

/* Optional tag */
.syd-optional {
    color: #999;
    font-weight: 400;
    font-size: 13px;
}

/* Help text beneath label */
.syd-help-text {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px 0;
}


/* Feature / benefit list — styled bullet list for service and content pages */
.syd-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.syd-feature-list li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    color: var(--syd-text-body, #424242);
    font-size: 0.95rem;
    line-height: 1.55;
    border-bottom: 1px solid #eee;
}

.syd-feature-list li:last-child {
    border-bottom: none;
}

.syd-feature-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--syd-green, #8dc263);
    font-weight: 700;
    font-size: 1.1rem;
}


/* ==========================================================================
   6. FORM INPUTS
   ========================================================================== */

/* Standard text input - replaces .laminate-input, .cnc-input, .shaker-input, .cl-input */
.syd-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    color: var(--syd-text-body, #424242);
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.syd-input:focus {
    border-color: var(--syd-primary, #0071b9);
    box-shadow: 0 0 0 3px rgba(0, 113, 185, 0.15);
    outline: none;
}

.syd-input:hover {
    border-color: #999;
}

/* Input with error state */
.syd-input-error {
    border-color: #d32f2f;
}

.syd-input-error:focus {
    border-color: #d32f2f;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}

/* Textarea - replaces .laminate-textarea, .cnc-textarea, .shaker-textarea */
.syd-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Select dropdown */
.syd-select {
    appearance: auto;
    cursor: pointer;
}

/* File input - replaces .laminate-file-input, .shaker-file-input (upload classes now global as syd-upload-*) */
.syd-file-input {
    display: block;
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 2px dashed #ccc;
    border-radius: 4px;
    background: #fafafa;
    cursor: pointer;
    box-sizing: border-box;
}

.syd-file-input:hover {
    border-color: var(--syd-primary, #0071b9);
    background: #f0f6ff;
}

/* Character counter */
.syd-char-count {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}


/* ==========================================================================
   7. FIELDSETS & LEGENDS
   ========================================================================== */

/* Fieldset - replaces .laminate-fieldset, .cnc-fieldset, .shaker-fieldset */
.syd-fieldset {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px 20px 10px;
    margin: 0 0 20px 0;
    background: #fff;
}

/* Legend - replaces .laminate-legend, .cnc-fieldset legend, .shaker-legend */
.syd-legend {
    color: var(--syd-primary, #0071b9);
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: 16px;
    font-weight: 600;
    padding: 0 10px;
    margin: 0;
}


/* ==========================================================================
   8. CHECKBOX & CONSENT
   ========================================================================== */

.syd-consent-group {
    padding: 14px 16px;
    background: #fff8e1;
    border: 1px solid #ffc107;
    border-radius: 6px;
}

.syd-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--syd-text-body, #424242);
    cursor: pointer;
    line-height: 1.5;
}

.syd-checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--syd-primary, #0071b9);
}


/* ==========================================================================
   9. VALIDATION & ERRORS
   ========================================================================== */

/* Validation summary box - replaces .laminate-validation-summary, .cnc-validation-summary, etc. */
.syd-validation-summary {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    padding: 12px 15px;
    margin-bottom: 20px;
    color: #d32f2f;
    font-size: 14px;
}

.syd-validation-summary ul {
    margin: 5px 0 0 0;
    padding-left: 20px;
}

/* Field-level error - replaces .laminate-field-error, .cnc-field-error, .shaker-field-error */
.syd-field-error {
    display: block;
    color: #d32f2f;
    font-size: 13px;
    margin-top: 4px;
}


/* ==========================================================================
   10. STATUS MESSAGES
   ========================================================================== */

/* Success panel - replaces .laminate-thank-you, .cnc-success-panel, .shaker-success, etc. */
.syd-status {
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.syd-status-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.syd-status-success .syd-status-icon {
    color: #2e7d32;
    font-size: 32px;
    margin-bottom: 10px;
}

.syd-status-success .syd-status-title {
    color: #2e7d32;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.syd-status-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

.syd-status-error .syd-status-title {
    color: #d32f2f;
}

.syd-status-info {
    background: #eff6ff;
    border: 1px solid #93c5fd;
}

.syd-status-info .syd-status-title {
    color: var(--syd-primary, #0071b9);
}


/* ==========================================================================
   11. TABLES
   ========================================================================== */

/* Standard table - for admin views, data grids, etc. */
.syd-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: 14px;
    margin: 15px 0;
}

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

.syd-table th {
    background: var(--syd-bg-light, #f4f4f4);
    font-weight: 600;
    color: var(--syd-text-dark, #363e4c);
}

.syd-table tr:hover {
    background: #f8f9fa;
}

/* Striped rows */
.syd-table-striped tr:nth-child(even) {
    background: #f8f9fa;
}


/* ==========================================================================
   12. CARDS
   ========================================================================== */

/* Standard card - replaces various card patterns across modules */
.syd-card {
    border: 1px solid #e0e0e0;
    border-radius: var(--syd-border-radius, 8px);
    box-shadow: var(--syd-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
    padding: 20px;
    background: #fff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.syd-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}


/* ==========================================================================
   13. LOADING & PROGRESS
   ========================================================================== */

.syd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--syd-text-body, #424242);
    font-size: 14px;
}

.syd-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid var(--syd-primary, #0071b9);
    border-radius: 50%;
    animation: syd-spin 0.8s linear infinite;
}

@keyframes syd-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ==========================================================================
   14. THANK YOU / CONFIRMATION PANEL
   ========================================================================== */

/* Shared success panel after form submission - replaces .laminate-thankyou,
   .shaker-thankyou, .cnc-confirmation */
.syd-thankyou {
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
    margin: 30px auto;
}

.syd-thankyou-icon {
    font-size: 48px;
    color: var(--syd-green, #8dc263);
    margin-bottom: 12px;
}

.syd-thankyou-title {
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 800;
    font-style: italic;
    color: var(--syd-text-dark, #363e4c);
    margin-bottom: 8px;
}

.syd-thankyou-ref {
    font-size: 14px;
    color: var(--syd-primary, #0071b9);
    font-weight: 600;
    margin-bottom: 16px;
}

.syd-thankyou-content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--syd-text-body, #424242);
}


/* ==========================================================================
   15. MODAL DIALOG
   ========================================================================== */

/* Shared modal - replaces .shaker-modal, .edge-modal, .structure-modal,
   .cutlist-modal, .modal-overlay (Projects) */
.syd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.syd-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.syd-modal {
    background: #fff;
    border-radius: var(--syd-border-radius, 8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}

.syd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.syd-modal-title {
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--syd-text-dark, #363e4c);
    margin: 0;
}

.syd-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.syd-modal-close:hover {
    color: var(--syd-text-dark, #363e4c);
}

.syd-modal-body {
    padding: 20px;
}

.syd-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


/* ==========================================================================
   16. BADGES
   ========================================================================== */

/* Status badges - replaces .cnc-status-*, .thickness-card__badge-* */
.syd-badge {
    display: inline-block;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.syd-badge-blue {
    background: #e3f2fd;
    color: var(--syd-primary, #0071b9);
}

.syd-badge-green {
    background: #e8f5e9;
    color: #2e7d32;
}

.syd-badge-amber {
    background: #fff8e1;
    color: #e65100;
}

.syd-badge-red {
    background: #fce4ec;
    color: #c62828;
}

.syd-badge-grey {
    background: #f5f5f5;
    color: #616161;
}


/* ==========================================================================
   17. BREADCRUMBS
   ========================================================================== */

/* Pill/chip style breadcrumbs with arrow separators.
   Replaces .materials-breadcrumbs, .syd-faq__breadcrumbs.
   Markup: <nav class="syd-breadcrumbs"><ol><li>...<li aria-current="page">...</ol></nav>
   Links inside non-current li render as pills; current li renders plain. */
.syd-breadcrumbs {
    font-size: 0.9rem;
    margin: 0 0 1.5rem 0;
}

.syd-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

.syd-breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

/* Separator between crumbs — right arrow in primary blue */
.syd-breadcrumbs li + li::before {
    content: "\2192";
    margin-right: 0.6rem;
    color: var(--syd-primary, #0071b9);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

/* All crumbs except the last render as a pill */
.syd-breadcrumbs li:not([aria-current]) > a {
    display: inline-block;
    padding: 0.35rem 0.95rem;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: var(--syd-bg-light, #f4f4f4);
    color: var(--syd-text-body, #424242);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.syd-breadcrumbs li:not([aria-current]) > a:hover,
.syd-breadcrumbs li:not([aria-current]) > a:focus {
    background: #e8f0f8;
    border-color: var(--syd-primary, #0071b9);
    color: var(--syd-primary, #0071b9);
    text-decoration: none;
}

/* Current (last) crumb is plain text, no pill */
.syd-breadcrumbs li[aria-current] {
    opacity: 0.8;
    font-weight: 500;
}


/* ==========================================================================
   18. SEARCH
   ========================================================================== */

/* Search input with results dropdown - replaces .materials-search-*,
   .syd-faq-search* */
.syd-search {
    position: relative;
    max-width: 400px;
    margin-bottom: 20px;
}

.syd-search-input {
    display: block;
    width: 100%;
    padding: 10px 12px 10px 36px;
    font-size: 15px;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    color: var(--syd-text-body, #424242);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.syd-search-input:focus {
    border-color: var(--syd-primary, #0071b9);
    box-shadow: 0 0 0 3px rgba(0, 113, 185, 0.15);
    outline: none;
}

.syd-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 16px;
    pointer-events: none;
}

.syd-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.syd-search-results.is-open {
    display: block;
}

.syd-search-result {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: var(--syd-text-body, #424242);
    transition: background 0.15s ease;
}

.syd-search-result:hover {
    background: #f0f6ff;
}


/* ==========================================================================
   19. ADMIN TOOLBAR & PAGINATION
   ========================================================================== */

/* Admin toolbar - replaces .laminate-admin-toolbar, .shaker-admin-toolbar,
   .cnc-admin-filters */
.syd-admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.syd-admin-search {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1 1 300px;
}

.syd-admin-search-input {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.syd-admin-search-input:focus {
    border-color: var(--syd-primary, #0071b9);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 113, 185, 0.15);
}

.syd-admin-filter-select {
    padding: 8px 10px;
    font-size: 14px;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: auto;
    cursor: pointer;
}

/* Pagination - replaces .laminate-admin-paging, .shaker-admin-paging,
   .cnc-pagination */
.syd-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    font-size: 14px;
    color: var(--syd-text-body, #424242);
}

.syd-page-info {
    color: #999;
    font-size: 13px;
}


/* ==========================================================================
   20. UPLOAD AREA
   ========================================================================== */

/* Drag-and-drop upload zone */
.syd-upload-area {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 40px 20px;
    text-align: center;
    background: #fafafa;
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
    position: relative;
}

.syd-upload-area:hover,
.syd-upload-area.syd-upload-dragover {
    border-color: var(--syd-primary, #0071b9);
    background: #d5e8f0;
}

.syd-upload-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.syd-upload-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--syd-primary, #0071b9);
    margin: 0 0 8px 0;
    font-family: var(--syd-font, 'Barlow Condensed', Arial, sans-serif);
}

.syd-upload-help {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Hidden native file input covering the drop zone */
.syd-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* File list beneath upload area */
.syd-file-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.syd-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 14px;
    background: var(--syd-bg-light, #f4f4f4);
}

.syd-file-item-error {
    background: #fdf0f0;
    border-color: #f5c6cb;
}

.syd-file-name {
    flex: 1;
    font-weight: 500;
    color: var(--syd-text-dark, #363e4c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.syd-file-size {
    color: #666;
    font-size: 13px;
    white-space: nowrap;
}

.syd-file-error {
    color: #d32f2f;
    font-size: 13px;
    font-weight: 500;
}

.syd-file-error-msg {
    color: #d32f2f;
    font-size: 13px;
}

.syd-file-errors {
    color: #d32f2f;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 0;
}

.syd-file-summary {
    text-align: right;
    font-size: 13px;
    color: #666;
    padding: 8px 0;
}

.syd-file-remove {
    background: none;
    border: none;
    color: #d32f2f;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
}


/* ==========================================================================
   21. RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 768px) {
    .syd-col-half,
    .syd-col-third,
    .syd-col-quarter {
        flex: 1 1 100%;
        min-width: 0;
    }

    .syd-form-row {
        gap: 0;
    }

    .syd-btn-row {
        flex-direction: column;
    }

    .syd-btn-row .syd-btn {
        width: 100%;
    }

    .syd-module {
        padding: 0 10px;
    }

    .syd-modal {
        width: 95%;
        max-height: 90vh;
    }

    .syd-admin-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .syd-admin-search {
        flex: 1 1 100%;
    }

    .syd-search {
        max-width: 100%;
    }

    .syd-breadcrumbs {
        font-size: 0.82rem;
    }

    .syd-breadcrumbs li:not([aria-current]) > a {
        padding: 0.3rem 0.75rem;
    }

    .syd-thankyou {
        padding: 25px 15px;
    }
}