/* --------------------------------------------
    css/plate_style.css

   3) ส่วนแสดงรายการป้าย ( .plates ) และป้ายเดี่ยว ( .plate )
-------------------------------------------- */

/**
 * .plates:
 * - ใช้ grid layout เพื่อให้ป้ายเรียงต่อกันแบบยืดหยุ่น
 * - ตั้งค่านับคอลัมน์อัตโนมัติ (auto-fill/auto-fit) พร้อม min-width = 195px
 */
 .plates {
    display: grid;
    /* 
        auto-fit จะพยายามขยายช่องว่างให้เต็มที่ 
        ถ้ากรณีคุณต้องการให้คอลัมน์ยุบเมื่อพื้นที่ไม่พอ ให้ใช้ auto-fill แทน
        สามารถลองสลับดูว่าอันไหนได้ผลตามต้องการ
    */
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 0.5rem;
    /* ถ้าต้องการจัดกึ่งกลางแนวนอนของแต่ละป้าย */
    justify-items: center;
    /* justify-content: center;  <-- ถ้าอยากให้ grid ทั้งหมดอยู่กึ่งกลางคอนเทนเนอร์ */
}

/**
 * .plate:
 * - กำหนด min-width = 195px เพื่อไม่ให้เล็กกว่านี้
 * - ใช้ max-width: 100% เพื่อให้ขยายได้เต็มช่องที่เหลือ (ถ้ามี)
 * - ภายในไม่บิดสัดส่วน (ไม่มี transform scale)
 */
 .plate {
    min-width: 195px;
    max-width: 100%;
    background: #fff;
    box-shadow: 0 0.2rem 0.5rem rgb(0 0 0 / 10%);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    /* ถ้าเคยมี transform scale ควรกำจัดออก */
    transform: none;
    transform-origin: center; 
  }

.plate * {
    font-family: 'Tabien'!important;
    white-space: nowrap;
    color: #040405;
}

.plate>a {
    text-decoration: none;
}

.plate[vehicle="pickup"] .plate-body span,
.plate[vehicle="pickup"] .plate-body .Province {
    color: #155831;
}
.plate[vehicle="van"] .plate-body span,
.plate[vehicle="van"] .plate-body .Province {
    color: #044396;
}

.plate[vehicle="car"][type="normal"] .plate-body {
    background-image: url("../assets/plate_bg_white.webp");
}
.plate[vehicle="van"][type="van"] .plate-body {
    background-image: url("../assets/plate_bg_van.webp");
}
.plate[vehicle="van"][type="van_graphic"] .plate-body {
    background-image: url("../assets/plate_bg_van_graphic.webp");
}
.plate[vehicle="pickup"] .plate-body {
    background-image: url("../assets/plate_bg_pickup.webp");
}
.plate[vehicle="pickup_graphic"][type="pickup_graphic"] .plate-body {
    background-image: url("../assets/plate_bg_pickup_graphic.webp");
}
.plate[vehicle="motorcycle"] .plate-body {
    background-image: url("../assets/plate_bg_motocycle_white.webp");
}

/* #region Graphic Plates of provinces */
.plate[vehicle="car"][province="BKK"][type="graphic"] .plate-body {
    background-image: url("../assets/plate_bg_graphic_BKK.webp");
}
/* #endregion Graphic Plates of provinces */


/* #region Gold Plates of provinces */
.plate[vehicle="car"][province="BKK"][type="gold"] .plate-body {
    background-image: url("../assets/plate_bg_gold_BKK.webp");
}
/* #endregion Gold Plates of provinces */



.plate-card {
    position: relative;
    width: -webkit-fill-available;
    color: #000;
    font-weight: bold;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.plate-card .vehicle {
    text-align: center;
}

.plate-card .vehicle span {
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-size: 0.8rem;
    font-weight: normal;
}

.plate-card .type_era {
    font-weight: normal;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.plate-card .type_era > span {
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-size: 0.8rem;
}

.plate-card .plate-body {
    width: -webkit-fill-available;
    height: auto;
    aspect-ratio: 21/9;
    font-size: 2.5em;
    font-weight: normal;
    line-height: 0.5em;
    padding: 0 0 0 0;
    border: 2px solid black;
    border-radius: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.plate-card > .plate-body::before {
    content: "";
    display: block;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    background: linear-gradient(150deg, rgb(255 255 255 / 38%), rgb(255 255 255 / 3%), rgb(255 255 255 / 0%));
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.plate-card .plate-body > .LetterNumber {
    width: -webkit-fill-available;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    overflow: hidden;
    margin: 0 0 0 0;
}
.plate-card .plate-body > .LetterNumber * {

}

.plate-card .plate-body>.LetterNumber>div {
    height: 35px;
    display: flex;
    flex-direction: row;
    padding: 4px 0 0 0;
}
.plate-card .plate-body>.LetterNumber>div>span {
    width: 100%;
    /* height: 40px; */
    font-size: 2em;
    text-align: center;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
}
.plate-card .plate-body>.LetterNumber>.col1>.firstnumber {
    text-shadow: var(--Text_Bevel);
}

.plate-card .plate-body>.LetterNumber>.col1>.letters {
    text-shadow: var(--Text_Bevel);
}

.plate-card .plate-body > .LetterNumber>.col2 {
    display: flex;
    flex-direction: row;
}

.plate-card .plate-body>.LetterNumber>.col2>.numbers {
    text-shadow: var(--Text_Bevel);
}
.plate-card .plate-body > .Province {
    width: fit-content;
    /* height: 29px; */
    font-size: 29px;
    color: #040405;
    /* background: red; */
    transform: scaleX(1.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.plate-card[type="Van"] .plate-body > .LetterNumber * {
    color: #03499b;
}

.plate-card[type="Van_Graphic"] .plate-body > .LetterNumber * {
    color: #03499b;
}

.plate-card[type="Pickup"] .plate-body > .LetterNumber * {
    color: #3e9137;
}
.plate-card .plate-number {
    font-size: 2.5em;
    /* font-size: 3rem; */
    font-weight: bold;
    color: #000;
    line-height: 2rem;
}

.plate-card .plate-province {
    font-size: 0.9rem;
    color: #555;
}

/* .plate-card[type="Graphic"] .plate-province {
    display: none;
}

.plate-card[type="Pickup"] .plate-number {
    color: #3e9137;
} */

.plate-card .plate-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.plate-card .plate-detail>.plate-sum {
    width: 25px;
    height: 25px;
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-size: 1.5em;
    font-weight: normal;
    color: #1e1e1e;
    border-radius: 50%;
    background: linear-gradient(180deg, #f5dfa4, #edaf5b);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.plate-card .plate-detail>.plate-sum>span {

}

.plate-card .plate-detail>.plate-price {}

.plate-card .plate-detail>.plate-price>span {
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-size: 1em;
    font-weight: 700;
}

.plate-border {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: auto;
    z-index: 2;
}

.plate-card .plate-body[vehicle="motorcycle"] {
    width: -webkit-fill-available;
    max-width: 150px;
    height: auto;
    aspect-ratio: 1.26/1;
    font-size: 2.3em;
    border: 3px solid #353535;
    border-radius: 10px;
    /* background: url("../assets/plate_motocycle.webp") no-repeat center center; */
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0 0 0;
    margin: 0 auto;
}
.plate-card .plate-body[vehicle="motorcycle"] > .LetterNumber {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.plate-card .plate-body[vehicle="motorcycle"] > .LetterNumber > .row_up {

}
.plate-card .plate-body[vehicle="motorcycle"] > .LetterNumber > .Province {
    
}
.plate-card .plate-body[vehicle="motorcycle"] > .LetterNumber > .row_down {
    
}

/* Smallest Screens */
@media (max-width: 444px) {
    .plates {
        grid-template-columns: repeat(auto-fill, minmax(187px, 1fr));
    }
}

@media (max-width: 768px) {
    .plate-card .plate-body {
        font-size: 2.5em;
        line-height: 0.5em;
    }
}