@tailwind base;
@tailwind components;
@layer components {
  /* general styles */
  .form-namal {
    @apply w-full px-4 p-2 rounded border  border-slate-300  text-slate-500 text-base bg-transparent h-12;
  }
  .btn {
    @apply py-3 px-10 rounded text-center hover:opacity-70 transition-all duration-300;
  }
  .btn-slate {
    @apply bg-slate-700 text-white;
  }
  .btn-primary {
    @apply bg-[#003b5d] text-white rounded-full ;
  }
  .btn-outlined {
    @apply text-[#003b5d] font-medium px-4 py-2 rounded-3xl border border-[#003b5d] hover:bg-[#003b5d] hover:text-white;
  }
  .btn-grey-outline {
    @apply px-5 py-2 rounded-3xl border border-slate-200 text-slate-500 hover:bg-slate-200 hover:text-slate-900;
  }
  .btn-secondary {
    @apply px-5 py-2 bg-slate-700 text-white flex  items-center gap-2 hover:opacity-90;
  }
  .login-card {
    @apply shadow-[0px_0px_5px_0px_rgba(34,34,36,0.25)] rounded-lg p-10 bg-white max-w-[594px] mx-auto;
  }
  .label {
    @apply w-full block text-slate-500 text-sm;
  }
  .card {
    @apply bg-white rounded-2xl border border-slate-200 p-4;
  }
  .x-divider {
    @apply h-[1px] bg-[#dddddd] w-full my-4;
  }
  .divider {
    @apply w-[1px] bg-slate-300 h-[50px] mx-0.5;
  }
  .table {
    @apply w-full border-separate border-spacing-0;
  }
  .table th {
    @apply p-4 bg-slate-100 border-y border-slate-300 text-left text-slate-500 first:rounded-tl-xl first:border-l last:rounded-tr-xl last:border-r;
  }
  .table td {
    @apply p-4 border-slate-300 text-left text-slate-500 first:border-l last:border-r;
  }
  .table-secondary tr:last-child td {
    @apply p-4 border-slate-300 border-b first:rounded-bl-xl last:rounded-br-xl;
  }
  .footer-table,
  .table tbody tr:nth-of-type(even) {
    @apply bg-[#f7f7f7];
  }
  .table tfoot td {
    @apply border-b border-slate-300 first:rounded-bl-xl last:rounded-br-xl;
  }
  .footer-table-wrapper {
    @apply flex justify-between;
  }
  .footer-left {
    @apply flex space-x-6;
  }
  .footer-items {
    @apply flex space-x-2 pr-6 border-r border-[#e7e7e9];
  }
  .page-counter {
    @apply flex space-x-4;
  }
  .previous-btn {
    @apply px-2 border-x border-[#e7e7e9];
  }
  .order {
    @apply px-2 py-1 w-max text-xs rounded-full;
  }
  .order.confirmed {
    @apply text-green-600 bg-green-100;
  }
  .order.pending {
    @apply text-amber-600 bg-amber-100
  }
  /* flight schedule  */
  .flight-schedule-wrapper {
    @apply space-y-2;
  }
  .flight-schedule {
    @apply card py-6;
  }
  /* login screen style */
  .authentication-wrapper {
    @apply flex h-screen w-full;
  }
  .img-section {
    @apply max-w-[70%] w-full relative;
  }
  .img-list ul {
    @apply flex gap-8;
  }
  .login-img {
    @apply w-full h-full object-cover;
  }
  .img-content {
    @apply absolute top-0 left-0 px-14 py-9 flex flex-col justify-between h-full w-full;
  }
  .form-section {
    @apply max-w-[30%] w-full py-6 px-10 flex flex-col justify-between items-center;
  }
  .forgot-block {
    @apply flex justify-between w-full pt-3 pb-6;
  }
  /* signup screen style  */
  .registration-form {
    @apply w-1/2 p-6 flex flex-col justify-between;
  }
  .field-group {
    @apply flex flex-wrap gap-6 w-full mt-6;
  }
  /* header */
  .header-alnamal {
    @apply flex justify-between h-16 items-center border-b border-[#efefef] pr-3 sticky top-0 bg-white z-50;
  }
  .avatar {
    @apply h-10 w-10 rounded-full cursor-pointer border border-[#999] flex items-center justify-center;
  }
  /* sidebar style */
  .sidenav {
    @apply h-[calc(100%_-_64px)] w-16 fixed top-16 left-0 bg-white overflow-x-hidden transition-[width] duration-300 ease-linear border-r border-[#efefef];
  }
  .expanded {
    @apply w-60;
  }
  .sidenav a {
    @apply p-2 text-base text-gray-800 flex h-[43px] items-center transition duration-300 whitespace-nowrap rounded-lg;
  }
  .sidenav a svg {
    @apply fill-black;
  }
  .sidenav a .nav-text {
    @apply hidden ml-4 transition-all duration-300 ease-linear;
  }
  .sidenav.expanded a .nav-text {
    @apply inline-block;
  }
  .sidenav a.active {
    @apply bg-[#1e3a8a] text-white;
  }
  .sidenav a.active svg {
    @apply fill-white;
  }
  /* body */
  main.user-main {
    @apply ml-16 transition-[margin-left] duration-300 ease-linear ;
  }
  .expanded-header,
  main.expanded-main {
    @apply ml-60
  }
  /* dashboard style */
  .namal-wrapper {
    @apply mx-12;
  }
  .dashboard-carousel {
    @apply relative w-full mx-auto overflow-hidden;
  }
  .carousel-img-group {
    @apply flex transition-transform duration-500 ease-out;
  }
  .carosel-img {
    @apply relative w-full h-[480px] overflow-hidden bg-center bg-cover bg-no-repeat clip-bottom-ellipse;
  }
  .carousel-bullets-wrapper {
    @apply absolute bottom-40 left-1/2 transform -translate-x-1/2 flex space-x-2 bg-[#2a2b2f] border-[#404143] backdrop-blur-2xl rounded-2xl px-3 py-2;
  }
  .bullet-btn {
    @apply w-2 h-2 rounded-full bg-gray-300;
  }
  .dashboard-search {
    @apply relative -mt-36 z-40 mb-20;
  }
  .search-btns {
    @apply absolute -top-14 left-0 space-x-0 inline-flex;
  }
  .search-btns .flights,
  .search-btns .hotels {
    @apply py-4 px-6 bg-[#101010] text-white backdrop-blur-[5px] flex gap-2 items-center;
  }
  .search-btns button .fill-path {
    @apply fill-[#F1F5F9];
  }
  .search-btns button .stroke-fill {
    @apply stroke-[#F1F5F9];
  }
  .search-btns .flights {
    @apply rounded-tl-3xl;
  }
  .search-btns .hotels {
    @apply rounded-tr-3xl;
  }
  .search-btns .active {
    @apply bg-slate-100 text-slate-900 ;
  }
  .search-btns button.active .fill-path {
    @apply fill-[#2A2A2E];
  }
  .search-btns button.active .stroke-fill {
    @apply stroke-[#2A2A2E];
  }
  .flight-search {
    @apply bg-white px-10 pb-10 pt-6 rounded-tr-[40px] rounded-bl-[40px] rounded-br-[40px] shadow;
  }
  /* flights page */
  .burger-btn {
    @apply w-12 h-12 p-2 box-border; 
  }
  .menu-links {
    @apply px-2 py-4;
  }
  .trip-group {
    @apply flex gap-3 mb-6;
  }
  .shuffle,
  .trip-btn {
    @apply px-3 py-2 bg-slate-50 rounded-3xl border border-slate-200 inline-block m-0 text-slate-800 text-xs hover:bg-slate-100;
  }
  .trip-btn.active {
    @apply bg-slate-300;
  }
  .city-selector {
    @apply flex gap-4 relative mb-6;
  }
  .flight-search .form-group {
    @apply block;
  }
  .selector_form-group {
    @apply  m-0 relative w-full;
  }
  .selector_form-group label {
    @apply absolute top-1/2 -translate-y-1/2 left-5 flex items-center gap-2;
  }
  input.hidden-radio {
    @apply hidden;
  }
  .selector-input {
    @apply py-5 pl-[5.5rem] pr-4 rounded-3xl shadow border border-slate-200 w-full;
  }
  .selector-input[name="to"] {
    @apply pl-[4.5rem];
  }
  .shuffle_form-group {
    @apply absolute top-1/2 -translate-y-1/2 right-9 w-max z-10;
  }
  .search-footer {
    @apply flex justify-between items-center;
  }
  .footer-form-group {
    @apply flex space-x-6;
  }
  .namal-toggle-wrapper {
    @apply flex items-center gap-2;
  }
  .toggle-label {
    @apply relative inline-flex items-center cursor-pointer m-0;
  }
  .toggle-bg {
    @apply w-7 h-4 bg-gray-300 rounded-full peer-checked:bg-slate-500 peer-focus:ring-2 peer-focus:ring-slate-500 transition-colors;
  }
  .toggle-bullet {
    @apply w-2 h-2 bg-white rounded-full absolute left-[.225rem] top-1 peer-checked:translate-x-3 transition-transform;
  }
  .toggle-text {
    @apply text-slate-900 text-xs;
  }
  .selector-input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
  }
  .departure {
    @apply pl-32;
  }
  .return {
    @apply pl-24;
  }
  .counter-wrapper {
    @apply flex items-center space-x-2;
  }
  .counter {
    @apply flex items-center border border-slate-400 rounded-full overflow-hidden;
  }
  .counter-label {
    @apply text-xs m-0 text-slate-900;
  }
  .counter-btn { 
    @apply p-0.5 px-2 bg-slate-400 text-white focus:outline-none;
  }
  .counter-display {
    @apply appearance-none border-0 px-2 py-0.5 text-center;
  }
  .cabin-type {
    @apply relative;
  }
  .cabin-type-select {
    @apply appearance-none pl-3 pr-8 py-2 rounded-3xl border border-slate-200 bg-none;
  }
  .cabin-type-icon {
    @apply absolute top-1/2 -translate-y-1/2 right-2 pointer-events-none;
  }  
  /* recent searches  */
  .recent-searches-header {
    @apply flex justify-between items-center mb-6;
  }
  .recent-search-wrapper {
    @apply flex flex-wrap gap-6
  }
  .recent-search-block {
    @apply px-6 py-3 bg-slate-100 rounded-2xl border border-slate-200 text-center;
  }
  /* our partners */
  .partner-slider {
    @apply flex justify-center items-center overflow-hidden;
  }
  .slider-items {
    @apply flex justify-center items-center gap-10 animate-[scrolling_20s_linear_infinite];
  }
  .partner-slider img {
    @apply w-28 object-contain h-16;
  }
  /* popular destinations */
  .destination-wrapper {
    @apply flex flex-wrap w-full gap-4 justify-between;
  }
  .dest-card {
    @apply w-[24%];
  }
  .dest-img {
    @apply w-full h-52 mb-3 rounded-lg;
  }
  .dest-name {
    @apply mb-1;
  }
  /* trip ideas */
  .filters {
    @apply flex flex-wrap gap-3 items-center mb-4;
  }
  /* flight packages */
  .package-wrapper {
    @apply flex flex-wrap gap-8;
  }
  .flight-package {
    @apply min-w-40 text-center;
  }
  .package-card {
    @apply p-2 border border-slate-200 rounded-lg; 
  }
  .inline-checkbox {
    @apply flex gap-1;
  }
  .filter-header {
    @apply flex items-center justify-between;
  }
  .accordion-header {
    @apply flex justify-between w-full;
  }
  .accordion-svg {
    @apply w-5 h-5 transition-transform duration-300 transform;
  }
  .accordion-content {
    @apply max-h-[500px] overflow-hidden opacity-100 transition-all duration-500 ease-in-out;
  }
  .acordion-label {
    @apply text-sm text-slate-900;
  }
  .filter-btn-wrapper {
    @apply flex gap-3 justify-end;
  }
  /* time range */
  .range-wrapper {
    @apply relative;
  }
  .range-thumb {
    @apply absolute w-full appearance-none bg-transparent pointer-events-none z-10;
  }
  .slider-track {
    @apply h-0.5 bg-gray-300 rounded-full relative;
  }
  .custom-range-slider {
    @apply  w-full mb-4;
  }
  /* Custom Range Slider */
  .custom-range-slider .range-thumb {
    @apply appearance-none bg-transparent;
    -webkit-appearance: none;
  }
  /* Thumb Style */
  .custom-range-slider .range-thumb::-webkit-slider-thumb {
    @apply border border-slate-500 w-4 h-4 bg-[#d9d9d9] rounded-full cursor-pointer pointer-events-auto appearance-none relative top-1/2 -translate-y-1/2;
  }
  .custom-range-slider .range-thumb::-moz-range-thumb {
    @apply border border-slate-500 w-4 h-4 bg-[#d9d9d9] rounded-full cursor-pointer;
  }
  /* Track Style */
  .custom-range-slider .range-thumb::-webkit-slider-runnable-track {
    @apply h-0.5 bg-transparent;
  }
  .custom-range-slider .range-thumb::-moz-range-track {
    @apply h-0.5 bg-transparent;
  }
  .price-range-wrapper {
    @apply flex gap-5 mt-7;
  }
  .price-input {
    @apply card text-sm px-2.5 py-1.5 w-full;
  }
  /* flight schedule style  */
  .flight-schedule-wrapper {
    @apply space-y-4 pb-9;
  }
  .flight-schedule-header {
    @apply flex justify-between items-center;
  }
  .flight-schedule-body {
    @apply flex justify-between mt-5;
  }
  .flight-route {
    @apply flex items-center gap-2;
  }
  .flight-connect {
    @apply h-0.5 bg-[#CBD5E1] w-52;
  }
  .flight-schedule-footer {
    @apply flex justify-between mt-4;
  }
  .footer-img-group {
    @apply flex space-x-4;
  }
  .footer-details {
    @apply flex space-x-7 items-center;
  }
  .flight-fair {
    @apply flex items-center gap-1;
  }
  .booking-wrapper {
    @apply flex justify-between items-center mt-10 mb-6;
  }
  .bookings-detail {
    @apply flex items-center space-x-7;
  }
  .baggage-info {
    @apply card mt-4;
  }
  .bookings-detail .booking  {
    @apply relative pr-7 before:absolute before:content-[''] before:top-1/2 before:-translate-y-1/2 before:right-0 before:bg-slate-300 before:w-[1px] before:h-5 last:before:hidden;
  }
  .booking-filters-wrapper {
    @apply flex justify-between mb-5;
  }
  .filter-content {
    @apply flex space-x-4 items-center;
  }
  .search-icon {
    @apply absolute top-1/2 -translate-y-1/2 left-3;
  }
  .search-input {
    @apply w-96 pl-10 rounded border-slate-200;
  }
  .elipssis-btn-wrapper {
    @apply relative inline-block;
  }
  .elipsis {
    @apply flex flex-col items-center justify-center w-6 h-6 text-gray-300 hover:text-gray-500;
  }
  .elipsis-dot {
    @apply block w-1 h-1 bg-gray-500 rounded-full mb-1 last:mb-0;
  }
  .elipsis-modal {
    @apply absolute right-0 w-40 bg-transparent shadow-lg border border-slate-400 z-10 rounded bg-white py-1;
  }
  .elipsis-item {
    @apply py-2 px-3 hover:bg-slate-300 hover:text-slate-500  transition-all duration-300;
  }
  .bg-gray-50 {
    @apply bg-slate-50;
  }
  .hidden-pane {
    display: none;
  }
  /* Tabs Container */
  .tabs-container {
    @apply w-full;
  }
  .tabs-header {
    @apply border-b border-slate-200;
  }
  .tab-btn {
    @apply w-32 py-2 px-4 text-sm font-medium text-slate-700 text-center border-t-4 border-transparent cursor-pointer transition-all duration-300;
  }
  .active-tab {
    @apply  border-[#335bb7] bg-slate-50;
  }
  .btn-detail {
    @apply px-6 py-2 bg-transparent rounded-full border border-[#3382a7] text-slate-800;
  }
  .btn-detail.active-tab {
    @apply px-6 py-2 bg-[#e2eff2] rounded-full border border-[#3382a7] hover:bg-[#3382a7];
  }
  /* Tabs Content */
  .tab-content {
    margin-top: 1rem; 
  }
  .tab-pane {
    color: #4b5563;
    font-size: 0.875rem; 
  }
  .flight-detail-container {
    @apply grid grid-cols-[78%_20%] gap-6;
  }
  .flight-info-wrapper {
    @apply flex gap-3 ;
  }
  .flight-info {
    @apply bg-slate-100 rounded-lg border p-2;
  }
  .info-flight-divider {
    @apply h-[1px] w-5 bg-slate-900 mx-3;
  }
  .passenger-form-group,
  .travel-document {
    @apply grid grid-cols-5 gap-3 mb-3;
  }
  .travel-document .form-group,
  .passenger-form-group .form-group {
    @apply flex-1;
  }
  .downloader {
    @apply border bg-slate-100 border-slate-500 rounded-lg inline-block py-2 px-3 hover:bg-slate-200 transition-all duration-300;
  }
};
@tailwind utilities;
@layer utilities {
  input.form-namal:-webkit-autofill {
    background-color: #E2E8F0 !important; 
    color: #64748B !important; 
    box-shadow: 0 0 0px 1000px #E2E8F0 inset !important;
    -webkit-text-fill-color: #1a202c !important; /* Ensures text color */
  }
  input.form-namal:-internal-autofill-selected {
    background-color: #E2E8F0 !important;
    color: #64748B !important;
    box-shadow: 0 0 0px 1000px #E2E8F0 inset !important;
    -webkit-text-fill-color: #1a202c !important;
  }
  input:focus {
    @apply !outline-none !ring-1 !ring-[#334155];
  }
  input:focus-visible {
    @apply !outline-none !ring-1 !ring-[#334155] shadow-none;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    -moz-appearance: textfield;
  }
  input[type='range']:focus {
    @apply !shadow-none;
  }
  textarea {
    @apply px-4 py-2 rounded border border-slate-200 w-full min-h-24;
  }
  .underlined-link {
    position: relative;
  }
  .underlined-link::after {
    content: '';
    display: inline-block;
    width: 68px;
    height: 12px;
    background: url('data:image/svg+xml,<svg width="72" height="13" viewBox="0 0 72 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.14577 11.0869C2.24251 10.9687 -2.77779 8.23357 7.21036 5.60199C17.1985 2.97041 53.9845 1.06628 71.0003 1.52442" stroke="black" stroke-width="2"/></svg>'); 
    background-size: cover; 
    position: absolute; 
    right: -10px; 
    bottom: -13px;
    transform: translateY(-13px);
  }
  .clip-bottom-ellipse {
    clip-path: ellipse(75% 82% at 50% 18%);
  }
  @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}
/*
 * 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.
 *


 */

 /* google font inter */
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
 }
 p, h1, h2, h3, h4, h5, h6, label {
  margin-bottom: 10px;
 }
 h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
 }
 p {
  font-size: 1rem;
 }
 h1 {
  font-size: 2.5rem; /* 40px */
  line-height: 3rem; 
 }
 h2 {
  font-size: 2rem; /* 32px */
  line-height: 2.5rem;
 }
 h3 {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem;
 }
 h4 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem;
 }
 h5 {
  font-size: 1rem; /* 16px */
  line-height: 1.375rem;
 }
 h6 {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; 
 }
 a {
  transition: .3s ease-in-out;
 }
 a.h-opacity:hover ::after,
 a.h-opacity:hover {
  opacity: .6;
 }