/* ================================================================
   TENDERGlobal Portal — Base Styles
   Applies design tokens from portal-tokens.css to global elements.
   Uses LOW-specificity selectors so page-specific CSS can override.
   Loads AFTER bootstrap and BEFORE style.css.
   ================================================================ */

/* ── 1. Global Box Sizing & Smoothing ────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── 2. Body Defaults ────────────────────────────────────── */
body {
    font-family: var(--tg-font-family);
    font-size: var(--tg-font-base);
    line-height: var(--tg-line-height-base);
    color: var(--tg-text);
    background-color: var(--tg-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 3. Typography ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tg-font-family);
    font-weight: 700;
    line-height: var(--tg-line-height-headings);
    color: var(--tg-text-strong);
    margin: 0 0 var(--tg-space-md);
}

h1 { font-size: var(--tg-h1); }
h2 { font-size: var(--tg-h2); }
h3 { font-size: var(--tg-h3); }
h4 { font-size: var(--tg-h4); }
h5 { font-size: var(--tg-h5); }
h6 { font-size: var(--tg-h6); }

p {
    font-size: var(--tg-font-base);
    line-height: var(--tg-line-height-base);
    margin-bottom: var(--tg-space-md);
}

small, .text-sm   { font-size: var(--tg-font-sm); }
.text-xs           { font-size: var(--tg-font-xs); }
.text-lg           { font-size: var(--tg-font-lg); }

/* ── 4. Links ────────────────────────────────────────────── */
a {
    color: var(--tg-secondary);
    text-decoration: none;
    transition: var(--tg-transition-fast);
}

a:hover,
a:focus {
    color: var(--tg-secondary-dark);
}

/* ── 5. Form Controls ────────────────────────────────────── */
/* Standardize all text inputs, selects, textareas.
   Uses class-based selectors to avoid disrupting bootstrap. */

.tg-input,
.tg-select,
.tg-textarea {
    display: block;
    width: 100%;
    height: var(--tg-input-height);
    padding: var(--tg-space-sm) var(--tg-space-md);
    font-family: var(--tg-font-family);
    font-size: var(--tg-font-sm);
    line-height: 1.5;
    color: var(--tg-text-strong);
    background-color: var(--tg-bg);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-border-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.tg-input:focus,
.tg-select:focus,
.tg-textarea:focus {
    outline: none;
    border-color: var(--tg-secondary);
    box-shadow: 0 0 0 3px rgba(46, 135, 149, 0.15);
}

.tg-input::placeholder {
    color: var(--tg-text-light);
    opacity: 1;
}

.tg-input:disabled,
.tg-select:disabled,
.tg-textarea:disabled {
    background-color: var(--tg-bg-alt);
    opacity: 0.7;
    cursor: not-allowed;
}

.tg-textarea {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

/* Form labels */
.tg-label {
    display: block;
    margin-bottom: var(--tg-space-xs);
    font-size: var(--tg-font-sm);
    font-weight: 600;
    color: var(--tg-text-strong);
}

/* Form group */
.tg-form-group {
    margin-bottom: var(--tg-space-lg);
}

/* ── 6. Buttons ──────────────────────────────────────────── */
/* New button system. Use .tg-btn for base + modifiers. */

.tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tg-space-sm);
    height: var(--tg-btn-height);
    padding: 0 var(--tg-space-lg);
    font-family: var(--tg-font-family);
    font-size: var(--tg-btn);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: var(--tg-secondary);
    border: none;
    border-radius: var(--tg-border-radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--tg-transition-base);
    letter-spacing: 0.01em;
}

.tg-btn:hover {
    background-color: var(--tg-secondary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--tg-shadow-md);
}

.tg-btn:active {
    transform: translateY(0);
    box-shadow: var(--tg-shadow-sm);
}

.tg-btn:focus-visible {
    outline: 2px solid var(--tg-secondary);
    outline-offset: 2px;
}

/* Primary (orange) */
.tg-btn-primary {
    background-color: var(--tg-primary);
}

.tg-btn-primary:hover {
    background-color: var(--tg-primary-hover);
}

/* Success (green) */
.tg-btn-success {
    background-color: var(--tg-success);
}

.tg-btn-success:hover {
    filter: brightness(0.92);
}

/* Danger (red) */
.tg-btn-danger {
    background-color: var(--tg-danger);
}

.tg-btn-danger:hover {
    filter: brightness(0.92);
}

/* Ghost / outline button */
.tg-btn-ghost {
    background-color: transparent;
    color: var(--tg-secondary);
    border: 1px solid var(--tg-border);
}

.tg-btn-ghost:hover {
    background-color: var(--tg-bg-alt);
    border-color: var(--tg-secondary);
    color: var(--tg-secondary);
}

/* Button sizes */
.tg-btn-sm {
    height: 32px;
    padding: 0 var(--tg-space-md);
    font-size: var(--tg-font-xs);
}

.tg-btn-lg {
    height: 48px;
    padding: 0 var(--tg-space-xl);
    font-size: var(--tg-font-lg);
}

/* Pill button */
.tg-btn-pill {
    border-radius: var(--tg-border-radius-pill);
}

/* ── 7. Cards ────────────────────────────────────────────── */
.tg-card {
    background: var(--tg-bg);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-border-radius-lg);
    box-shadow: var(--tg-shadow-xs);
    overflow: hidden;
    transition: var(--tg-transition-base);
}

.tg-card:hover {
    box-shadow: var(--tg-shadow-md);
}

.tg-card-body {
    padding: var(--tg-space-lg);
}

.tg-card-header {
    padding: var(--tg-space-md) var(--tg-space-lg);
    border-bottom: 1px solid var(--tg-border);
    background: var(--tg-bg-alt);
    font-weight: 700;
    font-size: var(--tg-font-base);
}

.tg-card-footer {
    padding: var(--tg-space-md) var(--tg-space-lg);
    border-top: 1px solid var(--tg-border);
    background: var(--tg-bg-alt);
}

/* ── 8. Badges ───────────────────────────────────────────── */
.tg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: var(--tg-border-radius-pill);
    white-space: nowrap;
}

.tg-badge-primary   { background: rgba(245, 131, 61, 0.12);  color: var(--tg-primary); }
.tg-badge-secondary { background: rgba(46, 135, 149, 0.10);  color: var(--tg-secondary); }
.tg-badge-success   { background: rgba(152, 206, 68, 0.15);  color: #5a8c1a; }
.tg-badge-warning   { background: rgba(245, 158, 11, 0.12);  color: #b45309; }
.tg-badge-danger    { background: rgba(239, 68, 68, 0.10);   color: var(--tg-danger); }
.tg-badge-info      { background: rgba(59, 130, 246, 0.10);  color: var(--tg-info); }

/* ── 9. Alerts ───────────────────────────────────────────── */
.tg-alert {
    padding: var(--tg-space-md) var(--tg-space-lg);
    border-radius: var(--tg-border-radius);
    font-size: var(--tg-font-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--tg-space-sm);
    margin-bottom: var(--tg-space-md);
}

.tg-alert-success { background: rgba(152, 206, 68, 0.12); color: #3d6b0f; border-left: 4px solid var(--tg-success); }
.tg-alert-warning { background: rgba(245, 158, 11, 0.10); color: #92400e; border-left: 4px solid var(--tg-warning); }
.tg-alert-danger  { background: rgba(239, 68, 68, 0.08);  color: #991b1b; border-left: 4px solid var(--tg-danger); }
.tg-alert-info    { background: rgba(59, 130, 246, 0.08);  color: #1e40af; border-left: 4px solid var(--tg-info); }

/* RTL: flip alert border from left to right */
[dir="rtl"] .tg-alert-success,
[dir="rtl"] .tg-alert-warning,
[dir="rtl"] .tg-alert-danger,
[dir="rtl"] .tg-alert-info {
    border-left: none;
    border-right-width: 4px;
    border-right-style: solid;
}

[dir="rtl"] .tg-alert-success { border-right-color: var(--tg-success); }
[dir="rtl"] .tg-alert-warning { border-right-color: var(--tg-warning); }
[dir="rtl"] .tg-alert-danger  { border-right-color: var(--tg-danger); }
[dir="rtl"] .tg-alert-info    { border-right-color: var(--tg-info); }

/* ── 10. Tables ──────────────────────────────────────────── */
.tg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tg-font-sm);
}

.tg-table th,
.tg-table td {
    padding: var(--tg-space-sm) var(--tg-space-md);
    border-bottom: 1px solid var(--tg-border);
    text-align: inherit;
}

.tg-table th {
    font-weight: 700;
    color: var(--tg-text-strong);
    background: var(--tg-bg-alt);
    font-size: var(--tg-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tg-table tbody tr:hover {
    background-color: var(--tg-bg-alt);
}

/* ── 11. Spacing Utilities ───────────────────────────────── */
/* Margin */
.tg-mt-0   { margin-top: 0 !important; }
.tg-mt-xs  { margin-top: var(--tg-space-xs) !important; }
.tg-mt-sm  { margin-top: var(--tg-space-sm) !important; }
.tg-mt-md  { margin-top: var(--tg-space-md) !important; }
.tg-mt-lg  { margin-top: var(--tg-space-lg) !important; }
.tg-mt-xl  { margin-top: var(--tg-space-xl) !important; }

.tg-mb-0   { margin-bottom: 0 !important; }
.tg-mb-xs  { margin-bottom: var(--tg-space-xs) !important; }
.tg-mb-sm  { margin-bottom: var(--tg-space-sm) !important; }
.tg-mb-md  { margin-bottom: var(--tg-space-md) !important; }
.tg-mb-lg  { margin-bottom: var(--tg-space-lg) !important; }
.tg-mb-xl  { margin-bottom: var(--tg-space-xl) !important; }

/* Padding */
.tg-p-0    { padding: 0 !important; }
.tg-p-sm   { padding: var(--tg-space-sm) !important; }
.tg-p-md   { padding: var(--tg-space-md) !important; }
.tg-p-lg   { padding: var(--tg-space-lg) !important; }

/* ── 12. Display & Flex Utilities ────────────────────────── */
.tg-flex        { display: flex !important; }
.tg-flex-col    { flex-direction: column !important; }
.tg-flex-wrap   { flex-wrap: wrap !important; }
.tg-items-center { align-items: center !important; }
.tg-justify-between { justify-content: space-between !important; }
.tg-justify-center  { justify-content: center !important; }
.tg-gap-xs      { gap: var(--tg-space-xs) !important; }
.tg-gap-sm      { gap: var(--tg-space-sm) !important; }
.tg-gap-md      { gap: var(--tg-space-md) !important; }
.tg-gap-lg      { gap: var(--tg-space-lg) !important; }

/* ── 13. Text Utilities ──────────────────────────────────── */
.tg-text-muted    { color: var(--tg-text-muted) !important; }
.tg-text-strong   { color: var(--tg-text-strong) !important; }
.tg-text-primary  { color: var(--tg-primary) !important; }
.tg-text-secondary { color: var(--tg-secondary) !important; }
.tg-text-success  { color: var(--tg-success) !important; }
.tg-text-warning  { color: var(--tg-warning) !important; }
.tg-text-danger   { color: var(--tg-danger) !important; }
.tg-text-center   { text-align: center !important; }
.tg-text-start    { text-align: start !important; }
.tg-text-end      { text-align: end !important; }
.tg-fw-400        { font-weight: 400 !important; }
.tg-fw-500        { font-weight: 500 !important; }
.tg-fw-600        { font-weight: 600 !important; }
.tg-fw-700        { font-weight: 700 !important; }

/* ── 14. Border Utilities ────────────────────────────────── */
.tg-border        { border: 1px solid var(--tg-border) !important; }
.tg-border-top    { border-top: 1px solid var(--tg-border) !important; }
.tg-border-bottom { border-bottom: 1px solid var(--tg-border) !important; }
.tg-rounded       { border-radius: var(--tg-border-radius) !important; }
.tg-rounded-lg    { border-radius: var(--tg-border-radius-lg) !important; }
.tg-rounded-pill  { border-radius: var(--tg-border-radius-pill) !important; }

/* ── 15. Shadow Utilities ────────────────────────────────── */
.tg-shadow-none   { box-shadow: none !important; }
.tg-shadow-sm     { box-shadow: var(--tg-shadow-sm) !important; }
.tg-shadow-md     { box-shadow: var(--tg-shadow-md) !important; }
.tg-shadow-lg     { box-shadow: var(--tg-shadow-lg) !important; }

/* ── 16. Visually Hidden (accessibility) ─────────────────── */
.tg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 17. Scrollbar Styling ───────────────────────────────── */
.tg-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.tg-scrollbar::-webkit-scrollbar-track {
    background: var(--tg-bg-alt);
    border-radius: 3px;
}

.tg-scrollbar::-webkit-scrollbar-thumb {
    background: var(--tg-border-strong);
    border-radius: 3px;
}

.tg-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--tg-text-light);
}

/* ── 18. Transitions ─────────────────────────────────────── */
.tg-transition     { transition: var(--tg-transition-base) !important; }
.tg-transition-fast { transition: var(--tg-transition-fast) !important; }

/* ── 19. Section Spacing ─────────────────────────────────── */
.tg-section {
    padding: var(--tg-space-xl) 0;
}

.tg-section-sm {
    padding: var(--tg-space-lg) 0;
}

/* ── 20. Divider ─────────────────────────────────────────── */
.tg-divider {
    border: none;
    border-top: 1px solid var(--tg-border);
    margin: var(--tg-space-lg) 0;
}

/* ================================================================
   21. GLOBAL REFINEMENTS — Typography, Spacing, Rhythm
   Improves readability and breathing room across ALL pages
   by softly overriding legacy selectors at minimal specificity.
   ================================================================ */

/* ── 21a. Body text refinements ──────────────────────────── */
body {
    word-spacing: var(--tg-word-spacing);
    letter-spacing: var(--tg-letter-spacing-body);
    text-rendering: optimizeLegibility;
}

/* ── 21b. Paragraph & prose breathing room ───────────────── */
p,
.details p,
.description p,
article p {
    line-height: var(--tg-line-height-base);
    margin-bottom: var(--tg-space-md);
}

/* ── 21c. Headings — comfortable multi-line spacing ──────── */
h1, h2, h3, h4, h5, h6,
.box-title,
.s-title,
.entry-title,
.page-title h2,
.page-title h4,
.search-results-title,
.search-results-titlehome {
    line-height: var(--tg-line-height-headings);
    margin-bottom: var(--tg-space-md);
}

/* Card & box titles inside components */
.travelo-box .box-title {
    margin-bottom: var(--tg-space-md);
    line-height: var(--tg-line-height-headings);
}

.box-title small,
.box-title .small {
    display: block;
    margin-top: var(--tg-space-xs);
    line-height: var(--tg-line-height-tight);
}

/* ── 21d. Form labels — consistent vertical rhythm ───────── */
form label,
.panel-content label,
.sidebar label {
    font-size: var(--tg-font-sm);
    font-weight: 600;
    letter-spacing: var(--tg-letter-spacing-ui);
    line-height: var(--tg-line-height-tight);
    margin-bottom: 6px;
    color: var(--tg-text-strong);
}

/* Checkbox/radio labels stay lighter */
form .checkbox label,
form .radio label,
form label.checkbox,
form label.radio {
    font-weight: 400;
    font-size: var(--tg-font-xs);
    letter-spacing: normal;
}

/* ── 21e. Form groups — comfortable spacing ──────────────── */
form .form-group,
.form-group {
    margin-bottom: var(--tg-space-lg);
}

.sidebar form .form-group {
    margin-bottom: var(--tg-space-md);
}

/* ── 21f. Form controls — better padding & height ────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
select,
textarea,
.form-control {
    font-family: var(--tg-font-family);
    font-size: var(--tg-font-sm);
    line-height: var(--tg-line-height-tight);
    padding: 8px 12px;
    border-radius: var(--tg-border-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--tg-secondary);
    box-shadow: 0 0 0 3px rgba(46, 135, 149, 0.12);
    outline: none;
}

textarea {
    min-height: 90px;
    line-height: var(--tg-line-height-base);
}

/* ── 21g. Travelo-box (main card component) — breathing ─── */
.travelo-box {
    padding: var(--tg-space-lg);
    margin-bottom: var(--tg-space-xl);
    border-radius: var(--tg-border-radius);
}

/* ── 21h. Filter/search panels — calmer layout ──────────── */
.search-box-wrapper,
.re-search-box,
.search-tab-content,
.booking-form,
.travelo-box.re-search-box {
    padding: var(--tg-space-lg);
}

.search-box-wrapper label,
.re-search-box label,
.booking-form label {
    font-size: var(--tg-font-xs);
    font-weight: 600;
    letter-spacing: var(--tg-letter-spacing-ui);
    color: var(--tg-text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.search-box-wrapper .form-group,
.re-search-box .form-group,
.booking-form .form-group {
    margin-bottom: var(--tg-space-lg);
}

/* ── 21i. Data-list (dl/dt/dd) — definition pairs rhythm ── */
dl dt {
    font-weight: 600;
    font-size: var(--tg-font-sm);
    color: var(--tg-text-muted);
    letter-spacing: var(--tg-letter-spacing-ui);
    margin-bottom: 2px;
}

dl dd {
    margin-bottom: var(--tg-space-md);
    line-height: var(--tg-line-height-base);
}

/* Booking-details dl */
.booking-details dt {
    margin-bottom: 4px;
}

.booking-details dd {
    margin-bottom: var(--tg-space-sm);
}

/* ── 21j. Table cells — more padding ─────────────────────── */
table th,
table td {
    padding: 10px 12px;
    line-height: var(--tg-line-height-tight);
}

/* ── 21k. Button spacing refinements ─────────────────────── */
a.button,
button,
input[type="submit"],
input[type="button"] {
    letter-spacing: var(--tg-letter-spacing-ui);
    line-height: 1.3;
}

/* ── 21l. Breadcrumbs & meta text ────────────────────────── */
.breadcrumbs,
.breadcrumbs li,
.post-meta,
.timing label,
.check-in label,
.check-out label {
    font-size: var(--tg-font-xs);
    letter-spacing: var(--tg-letter-spacing-ui);
    line-height: var(--tg-line-height-tight);
}

/* ── 21m. Sidebar ────────────────────────────────────────── */
.sidebar .travelo-box {
    padding: var(--tg-space-md);
    margin-bottom: var(--tg-space-lg);
}

.sidebar .box-title {
    font-size: var(--tg-font-base);
    margin-bottom: var(--tg-space-sm);
}

.sidebar .detailed-logo .details h5,
.sidebar .detailed-logo .details h6 {
    line-height: var(--tg-line-height-headings);
    margin-bottom: var(--tg-space-sm);
}

/* ── 21n. Icon-box components — balanced spacing ─────────── */
.icon-box.style1,
.icon-box.style2,
.icon-box.style3 {
    margin-bottom: var(--tg-space-md);
}

.icon-box .description,
.icon-box .box-title {
    line-height: var(--tg-line-height-base);
}

/* ── 21o. Page title container ───────────────────────────── */
.page-title-container {
    padding-top: 0;
    padding-bottom: 0;
}

.page-title-container .entry-title {
    margin-bottom: 0;
}

/* ── 21p. Horizontal rules — calmer separators ───────────── */
hr {
    margin-top: var(--tg-space-lg);
    margin-bottom: var(--tg-space-lg);
    border-top-color: var(--tg-border);
}

/* ── 21q. Alert/notification blocks ──────────────────────── */
.alert {
    padding: var(--tg-space-md) var(--tg-space-lg);
    line-height: var(--tg-line-height-base);
    margin-bottom: var(--tg-space-lg);
    border-radius: var(--tg-border-radius-sm);
}

/* ── 21r. Listing cards — article boxes ──────────────────── */
.image-box article.box {
    margin-bottom: var(--tg-space-lg);
}

.image-box .details {
    padding: var(--tg-space-md);
    line-height: var(--tg-line-height-base);
}

.listing-style1 .details .box-title {
    margin-bottom: var(--tg-space-sm);
}

.listing-style3 .details {
    padding: var(--tg-space-md) var(--tg-space-lg);
}

/* ── 21s. Tags & badges in tender rows ───────────────────── */
.tag {
    letter-spacing: var(--tg-letter-spacing-ui);
    line-height: 1.4;
}

/* ── 21t. Tender details / meta — comfortable pairs ──────── */
.tnd-details {
    gap: var(--tg-space-md);
    margin-top: var(--tg-space-sm);
}

.tnd-details__label {
    font-size: var(--tg-font-xs);
    color: var(--tg-text-muted);
    letter-spacing: var(--tg-letter-spacing-ui);
    line-height: 1.3;
    margin-bottom: 2px;
}

.tnd-details__value {
    font-size: var(--tg-font-sm);
    line-height: var(--tg-line-height-tight);
}

/* ── 21u. Section #content spacing ───────────────────────── */
#content {
    padding-top: var(--tg-space-xl);
    padding-bottom: var(--tg-space-xl);
}

/* ── 21v. Social icons — balanced spacing ────────────────── */
.social-icons li {
    margin-bottom: var(--tg-space-xs);
}

/* ── 21w. Price tags ─────────────────────────────────────── */
.price,
.price-wrapper {
    letter-spacing: var(--tg-letter-spacing-ui);
    line-height: var(--tg-line-height-tight);
}

/* ── 21x. Modal improvements ─────────────────────────────── */
.modal-body {
    padding: var(--tg-space-lg);
    line-height: var(--tg-line-height-base);
}

.modal-header {
    padding: var(--tg-space-md) var(--tg-space-lg);
}

.modal-footer {
    padding: var(--tg-space-md) var(--tg-space-lg);
}