:root {
    --brand-color: #800020;
    --bg-light: #faf9f7;
    --card-bg: #fff;
    --tab-text-color: #fff;
    --desc-color: #8b6269;
    --font-title: 3vh;
    --font-title-p: 1.5vh;
        --font-chef-desc-p: 1vh;
    --font-chef-desc: 2vh;
  
  --default-font-family: ui-sans-serif, system-ui, sans-serif, 
    "Apple Color Emoji", "Segoe UI Emoji", 
    "Segoe UI Symbol", "Noto Color Emoji";




}
.regcar>select{
    width:100%;
}
body {
  font-family: var(--default-font-family);
}
.privacy{
    display: grid;
    gap: 1vh;
}
.privacytitle{
    display: flex;
    justify-content: center;
    align-items: center;
}
.gridprivacy{
    display: grid;
    gap:1vh;
}
   .tab>button:nth-child(3){
        display: none;
    }
.itemgrid{
   display: flex;
   gap: 1vw;
}
.priiconc>i{
    color: var(--brand-color);
}
.textpri{
    font-weight: bold;
}
.sec3{
    background-color: #80002033;
    padding: calc(1vh + 1vw);
    border-radius: 1vh;
    border:1px solid var(--brand-color);
}
.iconabout{
    color: var(--brand-color);
}
.tab button {
    color: var(--tab-text-color) !important;

   
}
.cardcon{
   
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: scale(1);
}
.cardcon:hover {
  transform: scale(1.05); /* Slight zoom */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add depth */
}
.descabout{
    font-size: 1vh;
}
.pritext{
    display: grid;
    gap: 1vh;
}
.tab button i {
    color: var(--tab-text-color) !important;
  
}
 

.tab button.active {
    background-color: var(--card-bg);
    border: 1px solid #ddd;
    color: var(--brand-color) !important;
 
}

.tab button.active i {
    color: var(--brand-color) !important;
    
}

.tab button:not(.active) {
    color: var(--brand-color);

}

.tab button:not(.active) i {
    color: var(--brand-color);
   
}

@media screen and (orientation: portrait) {
    #counters{
        display: grid !important;
        grid-template-columns: unset !important;
        gap: 5vh;

    }
    .parking-web-page {
        display: grid;
        gap: 2vh;
        padding: 2vh;
    }
       .titlereg,
    .impicon {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 1vw;
    }
       .listsdiv {
        display: grid;
        font-size: 0.5vh;
       
    }
    .descimopo{
        font-size: 0.5vh;
    }

    .important {
        padding: calc(1vh + 1vw);
        border: 1px solid #80002033;
        border-radius: 1vh;
    }

    .icntoto {
        display: flex;
        gap: 1vw;
        align-items: center;
        font-size: 1vh;
    }

    .icnbox {
        display: grid;
        grid-template-columns: 5% 95%;
    }

    .todo,
    .nottodo {
        display: grid;
        gap: 1vh;
    }

    .headerTal {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2vh 2vw;
        box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
        background-color: white;

    }

    .tab button:not(.active) {
        color: var(--brand-color) !important;
       
    }

    .tab button:not(.active) i {
        color: var(--brand-color) !important;
      
    }



    .tab {
        display: flex;
        justify-content: space-around;
        background-color: #f0e4e7;
        border-radius: 5vh;
        padding: 0.5vh;
    }

    .tab button {
        flex: 1;
        padding: 1.2vh 0;
        font-size: 1vh;
        border-radius: 5vh;
        background-color: transparent;
        color: var(--brand-color);
    }

    .tab button.active {
        background-color: var(--card-bg);
        border: 1px solid #ddd;
        color: var(--brand-color);
        
    }

    .result-card,
    .regcarr,
    .GuidnessCon {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2vh;
    }
    .regcar{
        display: grid;
        gap: 1vh;
    }
 
    .regcar input,
    select {
        width: 100%;
        padding: 1vh 1vw;
        font-size: 16px;
        height: 3vh;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #f9f5f1;
    }

    .regcar button {
        width: 50%;
        padding: 14px;
        margin: auto;
           border: none;
        border-radius: 10px;
        background: linear-gradient(135deg, #800020, #800020);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .backtext {
        background-color: var(--card-bg);
        padding: 2vh;
        border: 1px solid #80002033;
        border-radius: 1vh;
        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
            rgba(17, 17, 26, 0.1) 0px 0px 8px;
    }
     .iconabout>i{
        font-size: 3vh;
    }

    .SystemStatus {
        width: auto;
        padding: 1vh;
        border-radius: 5vh;
        background-color: #dcfce7;
        text-align: center;
        font-size: var(--font-chef-desc-p);
    }
.icon-t{
    display: flex;
    justify-content: left;
    align-items: center;
}
    .hidden {
        display: none !important;
    }

    .tabcontent {
        display: none;
      
    }
    .icon-t>p{
        font-size: 1vh;
    }
    .regCar{
        display: flex;
        gap: 1vw;
        justify-content: center;
        font-size: var(--font-title-p);
        color: var(--brand-color);
        font-weight: bold;
    }

    .tabcontent.show {
     display: grid;
   
     align-items: center;
     text-align: center;
     gap: 1vh;
    }

    #addCarModal {
        display: none !important;
        
    }

    .appTitle {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .iconText {
        display: flex;
       justify-content: left;
        align-items: center;
        gap: 1vw;
    }

    .iconTal>button {
        background-color: var(--brand-color);
        padding: calc(0.5vh + 0.5vw);
        color: white;
        border: none;
        outline: none;
        border-radius: 2vh;
        outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
        .iconTal>button>i {
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1vh;
    }

    #prefix+button {
        background-color: #800020;
        padding: calc(0.5vh + 0.5vw);
        color: white;
        border: none;
        outline: none;
        border-radius: 1vh;
        height: 3vh;
        width: 60%;
        margin: auto;
        outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }

    .Text2 {
        color: var(--desc-color);
        font-size: var(--font-chef-desc-p);
    }

    .Text1 {
        color: var(--brand-color);
        font-size: var(--font-title-p);
    }

    #find {
   
        gap: 2vh;
      
    }

    #plate {
        padding: 1vh 1vw;
        font-size: 16px;
    }
.searchbarme{
    display: grid;
    gap: 1vh;
}
    .textme {
       font-size: var(--font-title-p);
       font-weight: bold;
       color: var(--brand-color);
        

    }

    .textme1 {
        font-size: var(--font-chef-desc-p);
        font-weight: bold;
        color: var(--desc-color);
    }
    .addbtn{
    display:flex;
  justify-content: center;
    gap: 1vw;
    background-color: var(--brand-color);
    border-radius: 1vh;
    padding: 1vh 1vw;;

    color: var(--bg-light);
}
   .icntxt {
        display: flex;
        justify-content: left;
        align-items: center;
    }
    .addv{
        display: grid;
        grid-template-columns: 70% 30%;
    }
    #loadme{
           display:flex;
  justify-content: center;
    gap: 1vw;
    background-color: var(--brand-color);
    border-radius: 1vh;
    padding: 1vh 1vw;;
margin: auto;
width: 60%;
    color: var(--bg-light);
    }
    .aboutsectios{
        display: grid;
        grid-template-columns: 1fr;
        gap: 2vh;
        justify-content: center;
        align-items: center;
    }
    .sec1>div{
        display: grid;
        gap: 1vh;
        justify-content: center;
        align-items: center;
        color: var(--brand-color);
        text-align: center;
    }
        .sec2>div{
        display: grid;
        gap: 2vh;
      

    }
    .cardcon{
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 1vh;
        text-align: center;
        padding: calc(1vh + 1vw);
        border-radius: 1vh;


    }
}



@media screen and (orientation: landscape) {

    :root {
        --default-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
.addbtn{
    display:flex;
  justify-content: center;
    gap: 1vw;
    background-color: var(--brand-color);
    border-radius: 1vh;
    padding: 1vh 1vw;;

    color: var(--bg-light);
}
.icn>i{
    color: var(--brand-color);
}
#loadme{
  background-color: var(--bg-light);
        padding: calc(0.5vh + 0.5vw);
        border: none;
        outline: none;
        border-radius: 2vh;
        outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        color: var(--brand-color);
}
    .parking-web-page {
        display: grid;
        gap: 5vh;
    }
 

    .tab button:not(.active) {
        color: var(--brand-color) !important;
    
    }

    .tab button:not(.active) i {
        color: var(--brand-color) !important;
      
    }

    .icon-t {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 0.5vw;
    }

    body {

        font-family: var(--default-font-family);
        background-color: #faf9f7;
    }

    .Text1 {
        color: #800020;
        font-size: var(--font-title);
    }

    .mmmm {
        margin: auto;
    }
#counters{
    padding:5vh 5vw;
    display:grid;
    grid-template-columns: repeat(3,1fr); 
    justify-content:center;
    gap:20px;
     margin-top:10px;
     align-items: center;
}
    .GuidnessCon {
        display: grid;
        gap: 2vh;
    }

    .hidden {
        display: none !important;
    }

    .titlereg,
    .impicon {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 1vw;
    }

    .listsdiv {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .important {
        padding: calc(1vh + 1vw);
        border: 1px solid #80002033;
        border-radius: 1vh;
    }

    .icntoto {
        display: flex;
        gap: 1vw;
    }

    .icnbox {
        display: grid;
        grid-template-columns: 5% 95%;
    }

    .todo,
    .nottodo {
        display: grid;
        gap: 1vh;
    }

    .Text2 {
        color: var(--desc-color);
        font-size: var(--font-chef-desc);
    }

    .tab {
        overflow: hidden;
        border-radius: 5vh;
        background-color: #f0e4e7;
        display: flex;
        justify-content: space-between;
    }

    .tabCon {
        padding: 0 10vw;

    }

    .adjust {
        display: flex;
        gap: 1vw;

    }

    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 1vh 3vw;
        transition: 0.3s;
        font-size: 16px;
        display: flex;
        gap: 1vw;
        margin: 1vh 0.5vw;
    }

    .tab button:hover {
        background-color: #ddd;
    }

    .tab button.active {
        background-color: white;
        border: 1px solid white;
        margin: 1vh 0.5vw;
        border-radius: 5vh;
        display: flex;
        gap: 1vw;
    }


    .tabcontent {
        display: none;
        padding: 16px;
    }

    .tabcontent.show {
        display: grid;
        gap: 2vh;

    }

    .partheader {
        display: flex;
        justify-content: center;
    }

    .partheader>div {
        font-weight: bold;
    }

    .headerTal {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2vh 10vw;
        box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
        background-color: white;

    }

    .icont {
        border: 1px solid green;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .modal-content {
        background: #fff;
        margin: 10% auto;
        padding: 20px;
        width: 400px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .close {
        float: right;
        font-size: 24px;
        cursor: pointer;
    }


    .iconText {
         
        display: flex;
       justify-content: left;
        align-items: center;
        gap: 0.5vw;
    

    }

    .iconTal>button {
        background-color: var(--brand-color);
        padding: calc(0.5vh + 0.5vw);
        border: none;
        outline: none;
        border-radius: 2vh;
        outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }

    .result-card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1vw;
        row-gap: 3vh;

    }

    .iconTal>button>i {
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3vh;
    }

    .textText {
        display: grid;
        gap: 1vh;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #plate {
        width: 50%;
        outline: none;
        border: #f0e4e7;
        background-color: #f9f5f1;
        padding: 1vh 1vw;
        border-radius: 1vh;
    }

    #plate:focus {
        outline: none;
        border-color: #800020;
        box-shadow: 0 0 0 4px rgba(128, 0, 32, 0.15);
    }


    .textme {
       font-size: var(--font-title);
   
      
 
       color: var(--brand-color);
        

    }               

   


    .textme1 {
        font-size: var(--font-chef-desc);
        font-weight: bold;
         color: var(--desc-color);
    }

    .regcarr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1vw;
        row-gap: 1vh;

    }

    .regcar>p {
        font-weight: bold;
    }

    .regcarr>div {
        width: 100%;
    }

    .regCar,.icntxt {
        display: flex;
        justify-content: left;
        gap: 0.5vw;
        align-items: center;
        color:var(--brand-color);
        font-size:var(--font-title);

    }

    .regCar>div {
        display: flex;
        align-items: center;
    }

    .regcar input {
        width: 90%;
        padding: 1vh 1vw;
        border: 1px solid #ccc;
        border: #f0e4e7;
        background-color: #f9f5f1;
        border-radius: 1vh;
        font-size: 15px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .regcar input:focus {
        border-color: #800020;
        outline: none;
        box-shadow: 0 0 6px #800020;
    }

    .regcar:nth-of-type(7) {
        display: flex;
        justify-content: right;
        grid-column: 3;
        grid-row: 3;
    }

    .regcar button {
        width: 10vw;
        padding: 12px 15px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(135deg, #800020, #800020);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .button{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .addv {
        display: grid;
        grid-template-columns: 70% 30%;
       }

    .icntxt {
        display: flex;
        justify-content: left;
        align-items: center;
    }

    #dbResult {
        display: flex;
        justify-content: center;
    }

    .regcar button svg {
        width: 2vw;
        height: 3vh;
    }

    .regcar button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .regcar button:active {
        transform: translateY(0);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    select {
        appearance: none;
     
        -webkit-appearance: none;
        -moz-appearance: none;

        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 1vh 2vw;
        font-size: 16px;
        font-family: 'Arial', sans-serif;
        color: #333;
        cursor: pointer;
        transition: all 0.3s ease;
        outline: none;
        width: 20%;

        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    select:hover,
    select:focus {
        border-color: #007BFF;
        box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
    }

   
    select::after {
        content: '\25BC';
       
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 12px;
        color: #555;
    }

   
    .select-wrapper {
        position: relative;
        display: inline-block;
        width: 2vw;
      
    }

    #prefix+button {
        background-color: #800020;
        padding: calc(0.5vh + 0.5vw);
        border: none;
        outline: none;
        border-radius: 2vh;
        outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
        color: white;


    }

    .backtext {
        background-color: white;
        padding: 2vh 5vw;
        border: 1px solid #80002033;
        margin-left: 10vw;
        margin-right: 10vw;
        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
        border-radius: 2vh;

    }

    .tc {
        display: flex;
        justify-content: center;
    }

    .it>i {
        color: #800020;
    }

    .bigHeader {
        display: grid;
        gap: 2vh;
        background-color: white;

    }

    .SystemStatus {
        background-color: #dcfce7;
        display: flex;
        width: auto;
        height: auto;
        padding: 0.5vh 1vw;
        border-radius: 5vh;
        justify-content: center;
        align-items: center;
        font-size: var(--font-chef-desc);

    }
    .searchbarme{
        display: flex;
        gap: 1vw;
    }
    .aboutsectios{
        display: grid;
        grid-template-columns: 1fr;
        gap: 5vh;
        justify-content: center;
        align-items: center;
    }
        .sec1>div{
        display: grid;
        gap: 2vh;
        justify-content: center;
        align-items: center;
        color: var(--brand-color);
        text-align: center;
    }
    .sec2>div{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 5vh;

    }
    .cardcon{
        display: grid;
        justify-content: center;
        align-items: center;
        gap: 1vh;
          text-align: center;
        padding: calc(1vh + 1vw);
        border-radius: 1vh;
    }
    .descabout{
        font-size: 2vh;
    }
    .iconabout>i{
        font-size: 5vh;
    }
}