/* ============================================
   RESPONSIVE CSS - ทะเบียนเฮง.คอม
   PHP 8.5 + Responsive Migration
   ============================================ */

/* ---- Base Responsive Overrides ---- */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

/* Make wrapper fluid */
#wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

#page {
    width: auto;
    max-width: 970px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---- TABLET: 768px - 1024px ---- */
@media screen and (max-width: 1024px) {

    #wrapper {
        width: 100%;
        background-size: contain;
    }

    #page {
        width: auto;
        margin: 0 10px;
    }

    #header {
        height: auto;
        min-height: 150px;
        background-size: 40%;
        background-position: right 20px top 20px;
        padding-bottom: 15px;
    }

    #header_title h1 {
        font-size: 48px;
        padding: 40px 0 0 20px;
        letter-spacing: -3px;
    }

    .description {
        font-size: 14px;
    }

    #body {
        padding: 0 0 20px 0;
    }

    #body_left {
        width: 65%;
        float: left;
    }

    #body_right {
        width: 35%;
        float: right;
    }

    #body_left_content {
        width: auto;
        padding: 20px 10px 0 20px;
    }

    .post-title {
        width: auto;
        float: none;
    }

    .post-top h4 {
        display: none;
    }

    .divFrameTop {
        width: 100%;
    }

    .divFrame,
    .divFrameSpecial2,
    .divFrameMotor {
        margin: 0 8px 8px 0;
    }

    #body_right_content {
        width: auto;
        padding: 8px;
    }

    #sidebar {
        width: auto;
        margin: 20px 0 0 10px;
    }

    #main_search {
        width: 250px;
        background-size: contain;
    }

    #searchform_top_text {
        width: 175px;
    }

    #footer {
        background-size: cover;
    }

    #footer_title h1 {
        font-size: 36px;
    }
}

/* ---- MOBILE: max 767px ---- */
@media screen and (max-width: 767px) {

    body {
        font-size: 14px;
    }

    #wrapper {
        width: 100%;
        background-image: none;
    }

    #page {
        width: auto;
        margin: 0;
        padding: 0 10px;
    }

    /* Header */
    #header {
        width: 100%;
        height: auto;
        background-image: none;
        padding: 15px 10px;
        overflow: visible;
    }

    #header_title {
        float: none;
        text-align: center;
    }

    #header_title h1 {
        font-size: 32px;
        padding: 10px 0 0 0;
        letter-spacing: -2px;
        text-align: center;
    }

    .description {
        font-size: 12px;
        text-align: center;
    }

    #header_right {
        float: none;
        text-align: center;
        padding: 10px 0;
    }

    #top_rss {
        float: none;
        padding: 5px 0;
        text-align: center;
    }

    #top_rss img {
        float: none;
    }

    #main_search {
        width: 100%;
        max-width: 320px;
        float: none;
        margin: 10px auto;
        background-size: 100% 100%;
        height: auto;
        min-height: 46px;
    }

    #searchform_top {
        float: none;
        padding: 9px;
        width: 100%;
    }

    #searchform_top_text {
        width: calc(100% - 50px);
        font-size: 14px;
        padding: 8px;
    }

    #headNews {
        display: none;
    }

    /* Body layout: stack columns */
    #body {
        width: 100%;
        padding: 0 0 20px 0;
        overflow: visible;
    }

    #body_left {
        width: 100%;
        float: none;
    }

    #body_right {
        width: 100%;
        float: none;
        clear: both;
    }

    #body_left_content {
        width: auto;
        padding: 15px 5px;
    }

    /* Content area */
    #content {
        width: 100%;
    }

    .post {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .post-top {
        width: 100%;
    }

    .post-title {
        width: 100%;
        float: none;
    }

    .post-title h1 {
        font-size: 22px;
    }

    .post-title h2 {
        font-size: 20px;
    }

    .post-title h3 {
        font-size: 12px;
    }

    .post-top h4 {
        display: none;
    }

    /* Tabien Cards - Responsive Grid */
    .divFrameTop {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    .divFrame {
        width: calc(50% - 6px);
        float: none;
        margin: 0;
        height: auto;
        min-height: 55px;
        background-size: cover;
    }

    .divFrame label.tabien {
        width: 100%;
        font-size: 1.3em;
        margin-top: 8px;
    }

    .divFrame label.price {
        width: 100%;
        font-size: 1em;
    }

    .divFrameSpecial2 {
        width: calc(50% - 6px);
        float: none;
        margin: 0;
        height: auto;
        min-height: 55px;
        background-size: cover;
    }

    .divFrameSpecial2 label.tabien {
        width: 100%;
        font-size: 1.3em;
    }

    .divFrameSpecial2 label.price {
        width: 100%;
        font-size: 1em;
    }

    .divFrameMotor {
        width: calc(33.33% - 6px);
        float: none;
        margin: 0;
        height: auto;
        min-height: 65px;
        background-size: cover;
    }

    .divFrameMotor label.tabien {
        font-size: 0.85em;
    }

    /* View Tabien Detail */
    .divViewTabien {
        width: 100% !important;
        float: none !important;
    }

    .divViewTabien2 {
        width: 100% !important;
        float: none !important;
    }

    /* Sidebar */
    #body_right_content {
        width: auto;
        margin: 10px 0 0 0;
        background-image: none;
        padding: 10px;
    }

    #sidebar {
        width: auto;
        margin: 10px 0;
    }

    .sidebars h2 {
        font-size: 22px;
    }

    /* Footer */
    #footer {
        background-size: cover;
        height: auto;
        padding: 20px 10px;
    }

    #footer_title {
        float: none;
        text-align: center;
    }

    #footer_title h1 {
        font-size: 28px;
        padding: 5px 0;
    }

    #footer_text {
        float: none;
        text-align: center;
        padding: 10px;
    }

    /* Tables */
    .simplyTable,
    .tableTabien,
    table.simplyTable,
    .entry table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Forms */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        max-width: 100%;
        font-size: 16px; /* prevent iOS zoom */
    }

    /* Pagination */
    .paginate,
    .current,
    .inactive {
        padding: 6px 10px;
        font-size: 14px;
    }

    /* Reservation form */
    #jongForm input[type="text"],
    #jongForm select {
        width: 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }

    /* Admin panel responsive */
    .adminTable {
        width: 100% !important;
        overflow-x: auto;
        display: block;
    }

    /* Buttons */
    .buttonblue,
    .buttonred,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Love tabien section */
    .loveTabien {
        width: 100% !important;
    }

    /* Clear floats on mobile */
    .clear {
        clear: both;
    }

    /* Extra bottom fixed bar */
    #extraDiv2 {
        display: none;
    }

    /* jQuery UI Dialog responsive */
    .ui-dialog {
        width: 90% !important;
        left: 5% !important;
        max-width: 350px;
    }

    /* Search result */
    .searchResult {
        width: 100% !important;
    }

    /* Blockquote */
    blockquote.style4 {
        padding-left: 20px;
        margin: 5px 0;
    }

    /* Square items (category buttons) */
    .square {
        margin: 3px;
        font-size: 12px;
    }
}

/* ---- SMALL MOBILE: max 480px ---- */
@media screen and (max-width: 480px) {

    #header_title h1 {
        font-size: 24px;
        letter-spacing: -1px;
    }

    .description {
        font-size: 11px;
    }

    .post-title h1 {
        font-size: 18px;
    }

    .post-title h2 {
        font-size: 16px;
    }

    .post-title h3 {
        font-size: 11px;
    }

    .post-top h3 {
        font-size: 12px;
    }

    /* Single column tabien on very small screens */
    .divFrame {
        width: calc(50% - 4px);
        min-height: 50px;
    }

    .divFrame label.tabien {
        font-size: 1.1em;
        margin-top: 6px;
    }

    .divFrame label.price {
        font-size: 0.9em;
    }

    .divFrameSpecial2 {
        width: calc(50% - 4px);
    }

    .divFrameMotor {
        width: calc(50% - 4px);
    }

    /* Admin panel tables scroll */
    .entry table {
        font-size: 12px;
    }

    .entry table td,
    .entry table th {
        padding: 4px 6px;
    }

    .sidebars h2 {
        font-size: 18px;
    }
}

/* ---- LANDSCAPE MOBILE ---- */
@media screen and (max-width: 767px) and (orientation: landscape) {

    .divFrame {
        width: calc(33.33% - 6px);
    }

    .divFrameSpecial2 {
        width: calc(33.33% - 6px);
    }
}

/* ---- Touch-friendly improvements ---- */
@media (pointer: coarse) {

    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
        line-height: 44px;
    }

    .square {
        min-height: 40px;
        line-height: 36px;
        padding: 4px 8px;
    }

    .divFrame a,
    .divFrameSpecial2 a {
        display: block;
        min-height: 44px;
    }
}

/* ---- Print styles ---- */
@media print {

    #header, #body_right, #footer, #extraDiv2, #headNews, .postmetadata, .paginate {
        display: none;
    }

    #body_left {
        width: 100%;
        float: none;
    }

    .divFrame {
        border: 1px solid #000;
        background-image: none;
    }
}