/**
 * Common styles for branch, ATM, and TCO details views
 * Consolidated CSS for details.blade.php files
 */

/* CSS Variables and base settings */
:root {
    --primary-color: #00D352;
    --secondary-color: #0D0C22;
    --text-color-primary: var(--secondary-color);
    --text-color-secondary: rgba(13, 12, 34, 0.7);
    --text-color-light: #FFFFFF;
    --text-color-muted: #6E6D7A;
    --background-light: #FFFFFF;
    --background-warning: rgba(250, 255, 4, 0.2);
    --background-success: #4BDF7F;
    --border-color-light: rgba(231, 231, 233, 1);
    --border-color-primary: var(--primary-color);
    --border-radius-small: 8px;
    --border-radius-medium: 12px;
    --border-radius-large: 16px;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 1rem; /* 16px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.25rem; /* 20px */
    --line-height-sm: 1.5rem; /* 24px */
    --line-height-md: 1.75rem; /* 28px */
    --line-height-lg: 2rem; /* 32px */
    --spacing-xxs: 0.25rem; /* 4px */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2rem; /* 32px */
    --letter-spacing-normal: -0.011em;
    --letter-spacing-medium: -0.014em;
    --letter-spacing-large: -0.017em;
}

/* Base Typography */
* {
    font-family: 'ABankSans', sans-serif !important;
}

body {
    color: var(--text-color-primary);
    font-weight: var(--font-weight-regular);
}

/* Text Utilities */
.bold, .font-bold {
    font-weight: var(--font-weight-bold);
}

.font-normal {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    align-items: center;
    text-align: center;
    letter-spacing: var(--letter-spacing-normal);
}

.title {
    font-style: normal;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    letter-spacing: var(--letter-spacing-large);
    text-align: center;
}

.location {
    font-size: var(--font-size-md);
    letter-spacing: var(--letter-spacing-medium);
    color: #000000;
}

.font-black {
    color: var(--text-color-primary) !important;
}

.font-grey {
    color: var(--text-color-secondary) !important;
}

/* Container Components */
.container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-md);
    gap: var(--spacing-sm);
    background: var(--background-light);
    border-radius: var(--border-radius-medium);
}

.address_box {
    position: relative;
}

.center_info {
    width: auto;
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--background-light);
    border-radius: var(--border-radius-small);
}

.center_info .p7 {
    padding: 0 7px;
}

/* Header Section */
.header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.header h2 {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: var(--letter-spacing-large);
    color: var(--text-color-primary);
}

.header p {
    font-style: normal;
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--text-color-secondary);
}

/* Icons Row */
.icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: var(--spacing-xxs);
    isolation: isolate;
}

.icons img {
    height: 24px;
}

/* Schedule Component */
.schedule {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-xs) var(--spacing-sm);
    gap: var(--spacing-xxs);
    align-self: stretch;
    flex-grow: 0;
    order: 0;
    margin-top: var(--spacing-sm);
}

.schedule .hr {
    width: 100%;
    height: 1px;
    background: var(--border-color-light);
}

/* Days of Week Navigation */
.days {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: calc(7 / 16 * 1rem);
    align-self: stretch;
    flex-grow: 0;
    order: 0;
}

.day {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xxs);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    text-align: center;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--text-color-primary);
    cursor: pointer;
}

.selected {
    background: var(--primary-color);
    color: var(--text-color-light);
    cursor: default;
}

.holiday {
    color: var(--text-color-muted);
}

/* Information Rows */
.info {
    width: 100%;
    /*display: flex;*/
    /*flex-direction: row;*/
    /*justify-content: space-between;*/
    align-items: center;
    padding: 0;
    font-style: normal;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-normal);
}

.schedule .info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    font-style: normal;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

.info .name {
    font-weight: var(--font-weight-regular);
    color: var(--text-color-muted);
}

.info .value {
    font-weight: var(--font-weight-bold);
    color: var(--text-color-primary);
}

/* Warning Notifications */
.warning, .yellow-info {
    position: relative;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-sm);
    background: var(--background-warning);
    border-radius: var(--border-radius-large);
    margin-top: var(--spacing-xxs);
    font-size: var(--font-size-md);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-medium);
    color: var(--text-color-primary);
}

.warning p, .yellow-info p.bold {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-medium);
    color: var(--text-color-primary);
}

.warning div, .notice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xxs);
    margin-top: var(--spacing-xxs);
}

.warning div p.time, .notice p.time {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-medium);
    color: var(--text-color-primary);
}

.notice svg {
    float: left;
}

.yellow-info > svg {
    position: absolute;
    right: var(--spacing-sm);
    bottom: var(--spacing-xs);
}

/* Success/Info Box - Green */
.info-green {
    width: 92%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-xs);
    background: var(--background-success);
    border-radius: var(--border-radius-large);
    gap: var(--spacing-xxs);
}

.info-green div {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xxs);
}

.info-green div p {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
}

.info-green div p span {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

.info-green p {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    line-height: var(--line-height-sm);
    letter-spacing: var(--letter-spacing-medium);
    color: var(--text-color-light);
}

/* Route Link Button */
.route {
    width: 100%;
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: calc(12 / 16 * 1rem) var(--spacing-xs);
    background: var(--background-light);
    border: 2px solid var(--border-color-primary);
    border-radius: var(--border-radius-small);
    margin-top: var(--spacing-xs);
}

.route p {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    display: flex;
    align-items: center;
    letter-spacing: var(--letter-spacing-normal);
    color: rgba(0, 211, 82, 0.9);
}