@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    *, *::before, *::after {
        @apply m-0 p-0 box-border;
    }

    html, body {
        @apply h-full font-sans bg-primary text-primary;
    }

    table {
        @apply w-full;
    }

    table body {
        @apply p-8;
    }

    th {
        @apply bg-blue py-2 rounded-sm border-r-2 border-white border-solid text-white text-sm;
    }

    td {
        @apply bg-white;
    }

    main {
        @apply bg-gradient-to-r from-white to-blue/20 text-primary w-full overflow-y-auto pb-8;
    }

    form {
        @apply bg-white rounded-lg shadow-primary p-8 mt-8 caret-blue placeholder-blue;
    }

    form.form-grid {
        @apply grid grid-cols-3;
    }

    form.filter-search {
        @apply bg-transparent shadow-none p-0 mt-0 rounded-none block;
    }

    input[type='time'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(69%) sepia(18%) saturate(637%) hue-rotate(167deg) brightness(88%) contrast(91%);
    }

    input[type='text'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }


    textarea {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue h-32 !important;
    }

    input[type='file'] {
        @apply text-sm ring-1 ring-blue focus:ring-2 focus:ring-blue text-blue border-primary w-full !important;
    }

    input[type='date'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type='datetime-local'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type='number'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type='email'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue !important;
    }

    input[type='password'] {
        @apply bg-white rounded-md border-primary min-w-full ring-1 ring-blue focus:border-primary focus:ring-2 focus:ring-blue text-blue placeholder-blue !important;
    }

    input[type='checkbox'] {
        @apply rounded-full bg-white cursor-pointer w-4 h-4 border-primary ring-0 ring-offset-0 active:ring-0 focus:ring-0 checked:ring-0 checked:ring-offset-0 checked:bg-dark-green checked:border-0 active:border-0 focus:ring-offset-0 !important;
    }

    input[type='radio'] {
        @apply rounded-full bg-white cursor-pointer w-4 h-4 border-primary ring-0 ring-offset-0 active:ring-0 focus:ring-0 checked:ring-0 checked:ring-offset-0 checked:bg-dark-green checked:border-0 active:border-0 focus:ring-offset-0 !important;
    }

    input[type='submit'] {
        @apply w-full !important;
    }

    input[type='file']::file-selector-button {
        @apply bg-blue border-0 text-white cursor-pointer;
    }

    select {
        @apply bg-white rounded-md border-primary border-2 text-primary w-full;
    }

    a {
        @apply text-sm no-underline;
    }

    .disabled {
        @apply pointer-events-none bg-blue/30 opacity-40;
    }

    .text-primary {
        @apply text-blue;
    }

    .bg-primary {
        @apply bg-white;
    }

    .bg-danger {
        @apply bg-pastel-red;
    }

    .errors {
        @apply line-through decoration-pastel-red/30 w-full text-center decoration-2;
    }

}

@layer components {

    .fade-up   { @apply animate-fade-up opacity-0; }
    .fade-up-1 { @apply animate-fade-up-1 opacity-0; }
    .fade-up-2 { @apply animate-fade-up-2 opacity-0; }
    .fade-up-3 { @apply animate-fade-up-3 opacity-0; }
    .fade-up-4 { @apply animate-fade-up-4 opacity-0; }
    .fade-up-5 { @apply animate-fade-up-5 opacity-0; }
    .fade-up-6 { @apply animate-fade-up-6 opacity-0; }

    .hero-tag-dot {
        @apply animate-blink w-[5px] h-[5px] rounded-full bg-white;
    }

    .opening {
        @apply bg-dark-green text-white border-green !important;
    }

    .opening::-webkit-calendar-picker-indicator {
        filter: brightness(0) saturate(100%) invert(100%) sepia(91%) saturate(0%) hue-rotate(177deg) brightness(110%) contrast(110%) !important;
    }

    .border-primary {
        @apply border-blue border-[1px] border-solid rounded-lg;
    }

    .button_to {
        @apply border-0 m-0 p-0 p-2 border-primary border-2 border-solid flex items-center justify-center;
    }

    .button {
        @apply py-2 px-2 rounded-full flex items-center justify-center cursor-pointer shadow-primary !important;
    }

    .button-primary {
        @apply text-white bg-green hover:bg-dark-green hover:no-underline hover:text-white;
    }

    .button-accept {
        @apply text-primary bg-green hover:bg-dark-green hover:no-underline hover:text-primary;
    }

    .button-danger {
        @apply text-white bg-pastel-red/60 hover:bg-dark-red/60 hover:no-underline hover:text-white !important;
    }

    .button-secondary {
        @apply text-white bg-blue hover:bg-pastel-blue hover:no-underline hover:text-white;
    }

    .button-doctor {
        @apply text-primary bg-blue hover:bg-pastel-blue hover:no-underline hover:text-primary;
    }

    .button-normal {
        @apply w-[6rem] !important;
    }

    .button-mini {
        @apply w-[4rem] text-xs !important;
    }

    .button-large {
        @apply w-[10rem];
    }

    .button-calendar {
        @apply bg-blue text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-pastel-blue text-[12px] hover:no-underline hover:text-white;
    }

    .button-draft {
        @apply bg-thistle text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-mauve text-[12px] hover:no-underline hover:text-white !important;
    }

    .button-booked {
        @apply bg-green text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-dark-green text-[12px] hover:no-underline hover:text-white !important;
    }

    .button-declined {
        @apply bg-pastel-red text-white flex items-center h-[1.5rem] justify-center m-[2px] hover:bg-pastel-red text-[12px] hover:no-underline hover:text-white !important;
    }

    .calendar-link {
        @apply cursor-pointer text-white hover:bg-pastel-blue;
    }

    .calendar-tag {
        @apply bg-primary border-primary p-2 text-primary font-semibold flex items-center justify-center;
    }

    .card-text {
        @apply col-span-5 flex items-start justify-start;
    }

    .clinic-card-phone {
        @apply w-full bg-white text-primary font-normal p-2 my-4 h-[35.5rem] hover:bg-blue/10 shadow-primary border-primary;
    }

    .clinic-show-container {
        @apply bg-primary p-4;
    }

    .crew-container {
        @apply m-4 rounded-lg p-8 shadow-primary bg-white min-h-[75vh];
    }

    .devise-main {
        @apply flex flex-col items-center justify-center;
    }

    .devise-form-wrap {
        @apply bg-white rounded-2xl border border-blue/20 p-8 w-full max-w-md mx-auto mt-12 shadow-[0_8px_32px_rgba(126,163,196,0.10)];
    }

    .devise-logo {
        @apply flex items-center gap-2 mb-8;
    }

    .devise-title {
        @apply text-xl font-light text-blue mb-1 mt-2;
    }

    .devise-sub {
        @apply text-xs text-blue/60 font-light mb-6;
    }

    .devise-errors {
        @apply bg-pastel-red/10 border border-pastel-red/30 rounded-xl p-4 mb-5;
    }

    .devise-fields {
        @apply flex flex-col gap-4;
    }

    .devise-label {
        @apply text-xs font-medium text-blue mb-1 block;
    }

    .devise-label-inline {
        @apply text-xs font-light text-blue/60 ml-2;
    }

    .devise-links {
        @apply mt-6 flex flex-col items-center gap-2;
    }

    .devise-links a {
        @apply text-xs text-blue/60 hover:text-dark-green transition-colors;
    }

    .dropdown {
        @apply bg-white border-primary border-2 border-solid rounded-sm absolute top-16 right-8 p-2 min-w-[15rem] flex flex-col;
    }

    .dropdown a {
        @apply hover:text-primary hover:bg-white m-2 p-2 border-primary rounded-md border-2 border-solid hover:border-primary inline-block;
    }

    .dropdown-item {
        @apply hidden bg-white divide-y divide-white rounded-lg shadow-primary border-primary w-44;
    }

    .dropdown-text {
        @apply text-sm text-primary font-normal block px-4 py-2 hover:bg-blue hover:text-white;
    }

    .form-item {
        @apply col-span-1 flex flex-col items-center justify-center p-2;
    }

    .form-check-boxes {
        @apply w-full h-full border-primary border-2 grid grid-cols-2 gap-0 p-2 !important;
    }

    .form-language {
        @apply w-full h-[2.75rem] border-primary border-2 flex items-center justify-between !important;
    }

    .form-file {
        @apply grid grid-cols-1 p-2;
    }

    .form-file-item {
        @apply bg-white rounded-md border-primary border-2 min-w-full p-2 !important;
    }

    .devise-main .form-check {
        @apply col-span-3 flex flex-col items-center justify-between;
    }

    .devise-main .form-check :first-child {
        @apply p-2;
    }

    .form-check {
        @apply col-span-1 flex flex-col items-center justify-between;
    }

    .form-action {
        @apply col-span-1 col-start-2 mt-4 flex flex-col items-center justify-center p-4;
    }

    .holiday-button {
        @apply bg-pastel-red/20 hover:bg-pastel-red/40 hover:text-white text-pastel-red/60;
    }

    .icon-tag {
        @apply min-w-[6rem] col-span-1 bg-white flex flex-col p-2 items-center justify-center rounded-lg cursor-pointer text-sm shadow-primary hover:bg-blue hover:text-white;
    }
    /*Clinic*/
    .clinic-hero {
        @apply relative rounded-2xl overflow-hidden h-[340px] mb-8;
    }
    .clinic-hero img {
        @apply w-full h-full object-cover opacity-90;
    }
    .clinic-hero-overlay {
        @apply absolute inset-0 bg-gradient-to-b from-transparent to-blue/60;
    }
    .clinic-hero-info {
        @apply absolute bottom-6 left-6 right-6 flex items-end justify-between;
    }
    .clinic-hero-name {
        @apply text-2xl font-medium text-white;
    }
    .clinic-hero-location {
        @apply text-[13px] font-light text-white/85 mt-1;
    }
    .clinic-hero-badge {
        @apply bg-white rounded-[10px] px-3.5 py-2 flex flex-col items-center gap-px shadow-[0_4px_16px_rgba(0,0,0,0.12)];
    }
    .clinic-hero-score {
        @apply text-[22px] font-bold text-blue leading-none;
    }
    .clinic-hero-score-label {
        @apply text-[10px] text-muted font-normal;
    }

    .clinic-grid {
        @apply grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-6 items-start;
    }

    .section-card {
        @apply bg-white rounded-[14px] border border-border p-6 mb-5;
    }
    .section-title {
        @apply text-sm font-medium text-blue mb-4 flex items-center gap-2;
    }
    .section-title-dot {
        @apply w-1.5 h-1.5 rounded-full bg-green;
    }

    .clinic-desc {
        @apply text-[13px] font-light text-muted leading-[1.75];
    }

    .lang-list {
        @apply flex flex-wrap gap-2;
    }
    .lang-item {
        @apply flex items-center gap-1.5 text-xs text-blue bg-cream border border-border rounded-full px-3 py-1;
    }

    .lang-item-small {
        @apply flex items-center gap-0.5 text-xs text-blue bg-cream border border-border rounded-full px-1.5 py-0.5;
    }

    .equipment-grid {
        @apply grid grid-cols-2 gap-2;
    }
    .equipment-item {
        @apply flex items-center gap-2 text-xs text-blue px-3 py-2 bg-cream rounded-lg min-h-12;
    }
    .equipment-dot {
        @apply w-[5px] h-[5px] rounded-full bg-green flex-shrink-0;
    }

    .doctors-grid {
        @apply grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4;
    }
    .doctor-card {
        @apply cursor-pointer flex flex-col items-center gap-2.5 px-3 py-5 bg-cream rounded-xl border border-border text-center transition-all duration-200 hover:-translate-y-[3px] hover:shadow-[0_8px_24px_rgba(126,163,196,0.12)];
    }
    .doctor-avatar {
        @apply w-[60px] h-[60px] rounded-full bg-gradient-to-br from-green/30 to-blue/30 flex items-center justify-center text-[22px] border-2 border-white shadow-[0_2px_8px_rgba(126,163,196,0.15)];
    }
    .doctor-name {
        @apply text-[13px] font-medium text-blue leading-snug;
    }
    .doctor-spec {
        @apply text-[11px] text-muted font-light;
    }
    .doctor-exp {
        @apply text-[10px] text-dark-green font-medium bg-green/10 rounded-full px-2.5 py-0.5;
    }

    .review-header {
        @apply flex items-center gap-3 mb-5 flex-wrap;
    }
    .review-score-big {
        @apply text-[32px] font-bold text-blue leading-none;
    }
    .review-label {
        @apply text-sm font-medium text-blue;
    }
    .review-sep {
        @apply w-1 h-1 rounded-full bg-border;
    }
    .review-count {
        @apply text-xs text-muted;
    }
    .review-all {
        @apply ml-auto text-xs text-pastel-blue font-medium hover:underline;
    }
    .review-bars {
        @apply grid grid-cols-1 md:grid-cols-2 gap-3 gap-x-8;
    }
    .review-row {
        @apply flex flex-col gap-1.5;
    }
    .review-row-top {
        @apply flex justify-between items-center;
    }
    .review-row-label {
        @apply text-xs font-normal text-blue;
    }
    .review-row-score {
        @apply text-xs font-medium text-blue;
    }
    .review-bar-wrap {
        @apply w-full bg-cream rounded-full h-1.5 overflow-hidden;
    }
    .review-bar-fill {
        @apply h-full rounded-full bg-green transition-[width] duration-1000 ease-in-out;
    }

    .hours-list {
        @apply flex flex-col;
    }
    .hours-row {
        @apply flex justify-between items-center text-xs py-[0.4rem] border-b border-border last:border-b-0;
    }
    .hours-day {
        @apply text-blue font-normal;
    }
    .hours-time {
        @apply text-muted font-light;
    }
    .hours-closed {
        @apply text-pastel-red font-normal;
    }
    .hours-today {
        @apply font-medium text-dark-green;
    }
    .clinic-desc-meta {
        @apply mt-4 flex items-center gap-4 flex-wrap;
    }

    .map-hint {
        @apply mt-3 text-xs text-blue/60 font-light leading-relaxed;
    }

    .hours-time-today {
        @apply text-xs font-medium text-dark-green;
    }

    .review-bar-fill-warn {
        @apply h-1.5 rounded-full bg-orange;
    }

    .map-wrap {
        @apply rounded-xl overflow-hidden bg-gradient-to-br from-blue/[0.08] to-green/[0.08] border border-border h-[200px] flex flex-col items-center justify-center gap-2;
    }
    .map-pin {
        @apply text-[28px];
    }
    .map-label {
        @apply text-xs text-muted font-light;
    }
    .map-address {
        @apply text-[11px] text-blue text-center px-4;
    }
    /*Clinic*/

    .navbar {
        @apply mt-[1px] bg-primary h-24 sticky top-0 z-50 text-primary grid grid-cols-[auto_1fr_auto] gap-4 border-blue/30 border-b-2 border-solid py-2 pl-2 md:pr-8 lg:pr-8 xl:pr-8;
    }

    .navbar-logo {
        @apply flex items-center gap-2;
    }

    .navbar-center {
        @apply hidden items-center justify-center gap-1 md:flex;
    }

    .navbar-link {
        @apply text-sm font-normal text-blue no-underline px-5 py-3.5 border-b border-blue/20 transition-colors last:border-b-0 hover:bg-pastel-grey/40
        md:text-xs md:px-3 md:py-1.5 md:rounded-md md:border-b-0 md:text-blue/60 md:whitespace-nowrap md:hover:text-blue
        lg:text-xs lg:px-3 lg:py-1.5 lg:rounded-md lg:border-b-0 lg:text-blue/60 lg:whitespace-nowrap lg:hover:text-blue
        xl:text-xs xl:px-3 xl:py-1.5 xl:rounded-md xl:border-b-0 xl:text-blue/60 xl:whitespace-nowrap xl:hover:text-blue;
    }

    .navbar-link.active {
        @apply font-medium bg-pastel-grey/40 text-blue
        md:text-blue md:font-medium md:bg-pastel-grey/40
        lg:text-blue lg:font-medium lg:bg-pastel-grey/40
        xl:text-blue xl:font-medium xl:bg-pastel-grey/40;
    }

    .navbar-actions {
        @apply flex items-center gap-2 relative justify-end;
    }

    .navbar-email {
        @apply text-xs text-blue/60 whitespace-nowrap md:block;
    }

    .nav-avatar {
        @apply w-[34px] h-[34px] rounded-full bg-pastel-grey border border-blue/20 flex items-center justify-center text-blue cursor-pointer transition-colors hover:border-blue hover:bg-blue/10;
    }

    .nav-avatar-desktop {
        @apply hidden md:flex;
    }

    .nav-dropdown {
        @apply hidden absolute top-16 right-4 bg-white border border-blue/20 rounded-xl p-1.5 min-w-[180px] z-[100] shadow-lg shadow-blue/15 flex-col gap-0.5;
    }

    .nav-dropdown-item {
        @apply text-xs font-normal text-blue no-underline px-3 py-2 rounded-lg transition-colors hover:bg-pastel-grey/40;
    }

    .nav-dropdown-item--danger {
        @apply text-pastel-red hover:bg-pastel-red/10;
    }

    .nav-dropdown-sep {
        @apply h-px bg-blue/20 mx-2 my-1;
    }

    .btn-login {
        @apply text-xs font-normal text-blue no-underline px-4 py-1.5 border border-blue/20 rounded-full transition-colors hover:border-blue;
    }

    .hamburger {
        @apply flex flex-col justify-center gap-[5px] bg-transparent border-none cursor-pointer md:hidden ml-auto;
    }

    .hamburger span {
        @apply block w-5 bg-blue rounded-sm transition-all duration-300 h-[1.5px] origin-center;
    }

    .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .hamburger[aria-expanded="true"] span:nth-child(2) { @apply opacity-0 scale-x-0; }
    .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .mobile-menu {
        @apply sticky flex top-16 bg-white border-b border-blue/20 flex-col shadow-lg shadow-blue/10 z-[49];
    }

    .filter-section {
        @apply bg-white border-b border-blue/20 sticky top-0 z-30;
    }

    .filter-bar {
        @apply flex items-center gap-2 overflow-x-auto px-4 py-2.5 border-b border-blue/20 md:px-8;
        -webkit-overflow-scrolling: touch;
    }

    .filter-search-row {
        @apply px-4 py-2.5 md:px-8;
    }

    .filter-search {
        @apply w-full md:max-w-[560px];
    }

    .filter-search-inner {
        @apply relative grid bg-pastel-grey/40 border border-blue/20 rounded-lg overflow-hidden transition-all grid-cols-[1fr_auto];
    }

    .filter-search-inner:focus-within {
        @apply border-blue shadow-[0_0_0_3px_rgba(126,163,196,0.1)];
    }

    .filter-search-icon {
        @apply absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-blue/60 flex items-center;
    }

    .filter-search-icon svg {
        @apply w-3.5 h-3.5;
    }

    .filter-search input[type="search"] {
        @apply font-sans text-xs font-light text-blue border-none outline-none w-full pl-8 pr-3 py-2 placeholder-blue/60 focus:bg-blue/5 !important;
    }

    .filter-search-btn {
        @apply font-sans text-xs font-medium text-white bg-blue border-none cursor-pointer px-4 transition-colors hover:bg-pastel-blue;
    }

    .filter-chip {
        @apply text-xs font-normal text-blue bg-white border border-blue/20 rounded-full px-3 py-1.5 cursor-pointer whitespace-nowrap no-underline transition-all hover:border-blue;
    }

    .filter-chip.active {
        @apply bg-blue text-white border-blue;
    }

    .filter-sep {
        @apply w-px h-[18px] bg-blue/20 flex-shrink-0 mx-0.5;
    }

    .filter-select-wrap {
        @apply relative inline-flex items-center;
    }

    .filter-select {
        @apply font-sans text-xs text-blue bg-white border border-blue/20 rounded-full py-1.5 pl-3 pr-6 appearance-none outline-none cursor-pointer min-w-[6rem];
    }

    .page {
        @apply max-w-[1280px] mx-auto px-4 py-7 md:px-8;
    }

    .page-header {
        @apply flex items-baseline justify-between mb-5;
    }

    .page-title {
        @apply text-xl font-light text-blue;
    }

    .page-title b {
        @apply font-medium;
    }

    .page-sub {
        @apply text-xs text-blue/60;
    }

    .clinics-grid {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-4 lg:gap-5;
    }

    .clinic-card-img {
        @apply [filter:saturate(0.9)_brightness(1.08)];
    }

    .clinic-card {
        @apply bg-white rounded-2xl overflow-hidden border border-blue/20 no-underline text-blue flex flex-col cursor-pointer transition-all duration-300 [animation:cardIn_0.5s_ease_both] [&:nth-child(1)]:[animation-delay:0.04s] [&:nth-child(2)]:[animation-delay:0.08s] [&:nth-child(3)]:[animation-delay:0.12s] [&:nth-child(4)]:[animation-delay:0.16s] [&:nth-child(5)]:[animation-delay:0.20s] [&:nth-child(6)]:[animation-delay:0.24s];
    }

    .clinic-card:hover {
        @apply -translate-y-1 border-blue/30 shadow-[0_14px_36px_rgba(126,163,196,0.14)];
    }

    .card-img {
        @apply relative overflow-hidden bg-blue/10 h-[190px];
    }

    .card-img img {
        @apply w-full h-full object-cover transition-transform duration-500 opacity-[0.92];
    }

    .clinic-card:hover .card-img img {
        @apply scale-105;
    }

    .card-img-gradient {
        @apply absolute inset-0 bg-gradient-to-b from-transparent from-[55%] to-[rgba(0,0,0,0.22)];
    }

    .card-score {
        @apply absolute bottom-2.5 left-2.5 bg-white rounded-lg px-2 py-0.5 flex items-center gap-1 text-xs font-medium text-blue;
    }

    .card-score-star {
        @apply text-[11px] text-orange;
    }

    .card-save {
        @apply absolute top-2.5 right-2.5 w-[30px] h-[30px] rounded-full bg-white/90 border-none cursor-pointer flex items-center justify-center text-sm transition-all hover:scale-110 hover:bg-white;
    }

    .card-available {
        @apply absolute top-2.5 left-2.5 bg-white rounded-full px-2 py-0.5 text-[10px] font-medium text-dark-green flex items-center gap-1;
    }

    .card-not-available {
        @apply absolute top-2.5 left-2.5 bg-white rounded-full px-2 py-0.5 text-[10px] font-medium text-dark-red flex items-center gap-1;
    }

    .card-available-dot {
        @apply w-[5px] h-[5px] rounded-full bg-dark-green animate-blink;
    }

    .card-body {
        @apply p-4 flex flex-col gap-0 flex-1;
    }

    .card-name-row {
        @apply flex items-start justify-between gap-2 mb-1;
    }

    .card-name {
        @apply text-sm font-medium text-blue leading-snug;
    }

    .card-location {
        @apply text-[11px] font-light text-blue/60 mb-2.5;
    }

    .card-tags-row {
        @apply grid grid-cols-2 gap-1 mb-2.5;
    }

    .card-tags-col {
        @apply flex flex-col gap-[3px];
    }

    .spec-tag {
        @apply inline-flex items-center justify-center text-[9px] font-medium tracking-wide bg-blue text-white rounded px-1.5 py-0.5 whitespace-nowrap overflow-hidden text-ellipsis;
    }

    .spec-tag.equipment {
        @apply bg-blue/10 text-pastel-blue;
    }

    .card-meta-row {
        @apply grid grid-cols-2 gap-2 items-center pt-2.5 mt-auto border-t border-blue/20;
    }

    .card-languages {
        @apply flex gap-1 items-center flex-wrap;
    }

    .lang-flag {
        @apply text-base leading-none;
    }

    .card-price-wrap {
        @apply flex items-center justify-end gap-1;
    }

    .price-symbol {
        @apply text-lg font-light text-blue/60 leading-none;
    }

    .price-bars {
        @apply flex items-end gap-0.5;
    }

    .price-bar {
        @apply w-1.5 rounded-sm bg-blue/20 transition-colors [&:nth-child(1)]:h-2 [&:nth-child(2)]:h-3 [&:nth-child(3)]:h-4 [&:nth-child(4)]:h-5 [&:nth-child(5)]:h-6;
    }

    .price-bar.active {
        @apply bg-dark-green;
    }

    .pagy {
        @apply flex space-x-1 font-normal text-sm;
        a:not(.gap) {
            @apply block rounded-lg py-2 px-4 bg-blue text-white;
            &:hover {
                @apply bg-pastel-blue;
            }
            &:not([href]) {
                @apply text-white bg-pastel-blue cursor-default;
            }
            &.current {
                @apply text-white bg-pastel-blue;
            }
        }
    }

    .price-list-card {
        @apply col-span-3 shadow-primary rounded-lg p-6 font-normal hover:bg-blue/10 grid grid-cols-7 gap-2;
    }

    .review-bar {
        @apply w-full bg-light-green rounded h-2.5 me-2;
    }

    .review-progress {
        @apply bg-green h-2.5 rounded;
    }

    .review-tag {
        @apply bg-green text-white text-lg font-semibold inline-flex items-center p-1.5 rounded;
    }

    .shadow-primary {
        @apply shadow-lg shadow-blue/50;
    }

    .small-counter {
        @apply absolute text-white inline-flex items-center justify-center w-6 h-6 text-xs font-bold bg-pastel-red border-2 border-pastel-red rounded-full -top-2 -end-2 !important;
    }

    .notice {
        @apply absolute py-2 px-3 bg-green top-12 left-12 text-white font-medium rounded-lg;
    }

    .flag-container {
        @apply grid grid-cols-2 gap-2;
    }

    .flag {
        @apply col-span-1 w-[2rem];
    }

    .icon {
        @apply text-primary hover:text-pastel-blue stroke-2 w-12;
    }

    .shell {
        @apply flex flex-col min-h-screen;
    }

    .logo-mark {
        @apply w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold text-sm bg-gradient-to-br from-green to-blue;
    }

    .logo-name {
        @apply  md:text-[19px] lg:text-[19px] xl:text-[19px] font-normal text-green;
    }

    .nav-links {
        @apply hidden lg:flex xl:flex gap-8 list-none;
    }

    .nav-links a {
        @apply text-xs text-muted no-underline relative pb-[2px] transition;
    }

    .nav-actions {
        @apply flex items-center gap-3;
    }

    .btn-ghost {
        @apply text-xs text-blue px-4 py-1 border border-border rounded-full transition;
    }

    .btn-solid {
        @apply text-xs font-medium text-white px-5 py-1.5 bg-green rounded-full transition;
    }

    .hero {
        @apply relative flex items-center justify-center overflow-hidden flex-1;
    }

    .hero-bg {
        @apply absolute inset-0 bg-cover bg-center bg-no-repeat z-0 bg-[url(/assets/chair-44d849e84b66f2f3b43a2d01ac6a3abb74d77c92688f6b6c698488c4d0c4cdc1.jpg)];
    }

    .hero-overlay {
        @apply absolute inset-0 bg-blue/40;
    }

    .hero-content {
        @apply relative z-10 text-center px-4 py-4 md:px-10 md:py-10 max-w-[80vw] md:max-w-lg lg:max-w-2xl xl:max-w-2xl bg-white/10 backdrop-blur border border-white/20 rounded-[20px];
    }

    .hero-tag {
        @apply inline-flex items-center gap-2 text-[11px] uppercase tracking-wider text-white bg-white/20 border border-white/40 rounded-full px-4 py-1 mb-5;
    }

    .hero-title {
        @apply text-white font-light leading-tight mb-4 text-2xl lg:text-4xl xl:text-5xl;
    }

    .hero-sub {
        @apply text-white/90 text-sm lg:text-lg xl:text-lg font-light leading-relaxed mb-4 lg:mb-8 xl:mb-8;
    }

    .hero-cta {
        @apply flex items-center justify-center gap-2 lg:gap-4 xl:gap-4 flex-wrap;
    }

    .btn-hero {
        @apply text-xs lg:text-sm xl:text-sm font-medium text-white bg-green rounded-full px-8 py-3 shadow-lg transition;
    }

    .btn-link {
        @apply text-sm text-white/80 transition;
    }

    .cards-strip {
        @apply grid lg:grid-cols-3 xl:grid-cols-3 p-4 gap-4 lg:px-10 lg:py-5 xl:px-10 xl:py-5 bg-white border-t border-border;
    }

    .card {
        @apply border border-border rounded-xl p-4 flex gap-4 transition no-underline xl:h-[10em] lg:h-[10em] w-full;
    }

    .card-icon {
        @apply w-10 h-10 rounded-lg flex items-center justify-center text-lg;
    }

    .card-icon.green {
        @apply bg-green/20;
    }

    .card-icon.blue {
        @apply bg-blue/20;
    }

    .card-title {
        @apply text-sm font-medium text-blue mb-1;
    }

    .card-desc {
        @apply text-xs text-muted leading-relaxed;
    }

    .footer {
        @apply sticky bottom-0 flex flex-col md:flex-row items-center justify-between h-auto md:h-12 p-2 md:px-10 bg-white border-t border-blue/20 z-50 gap-1 md:gap-0 py-2 md:py-0;
    }

    .footer-copy {
        @apply text-xs text-muted;
    }

    .footer-links {
        @apply flex gap-3 lg:gap-6 xl:gap-6 list-none;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */