/* Estilos estandarizados para EMENU */

/* ============================== GENERAL COLOR DESIGN CHANGES CONTROL ============================= */

/* BODY COLOR */             :root { --body-color:        #C0C0C0; } /* #C0C0C0 - All files */
/* BORDERS COLOR */          :root { --border-color:      #CCCCCC; } /* #CCCCCC - All files */
/* BUTTONS BG COLOR */       :root { --button-color:      #999999; } /* #999999 - All files */
/* BOTTONS SELECT SMALL */   :root { --button-select-sml: #488C4C; } /* #488C4C - prd_display_sml.php */
/* BOTTONS SELECT LARGE */   :root { --button-select-lrg: #488C4C; } /* #488C4C - prd_display_lrg.php */
/* PAGES BG COLOR */         :root { --page-bg-color:     #000000; } /* #000000 */
/* PRODUCT LARGE BG COLOR */ :root { --prd-lrg-bg-color:  #FFFFFF; } /* #FFFFFF - prd_display_lrg.php*/
/* PRODUCT SMALL BG COLOR */ :root { --prd-sml-bg-color:  #FFFFFF; } /* #FFFFFF - prd_display_sml.php*/
/* SUBTOTALS BG COLOR */     :root { --subtotal-bg-color: #FFFFFF; } /* #FFFFFF - prd_display_lrg.php, prd_display_sml.php, order_review.php */
/* GRAPHICS & TEXT AREAS */  :root { --text-area-color:   #FFFFFF; } /* #FFFFFF - order_review.php, dine_in_checkout.php, take_out_checkout.php, pick_up_checkout.php, delivery_checkout.php, purchase_receipt.php */
/* TITLES BG COLOR */        :root { --titles-bg-color:   #FFFFFF; } /* #FFFFFF - All files*/
/* TOTAL PYMT BG COLOR */    :root { --total-bg-color:    #EEEEEE; } /* #EEEEEE - card_pymt_review.php (color must be few darker than text areas color) */

/* ================================================================================================= */

/* A HREF */
a { text-decoration: none; /* Remove underline from links */ }

/* ALERT MESAGES */
.alert-message-success-grn { border-radius: 5px; border: 2px solid #C3E6CB; background-color: #D4EDDA; text-align: center; padding: 10px; font-family: Arial; font-size: 15px; color: #155724;
    margin-left: 12px; margin-right: 12px; max-width: 330px; }
.alert-message-error-red   { border-radius: 5px; border: 2px solid #F5C6CB; background-color: #F8D7DA; text-align: center; padding: 10px; font-family: Arial; font-size: 15px; color: #721C24; 
    margin-left: 12px; margin-right: 12px; max-width: 330px; }
.alert-message-info-blu    { border-radius: 5px; border: 2px solid #BEE5EB; background-color: #D1ECF1; text-align: center; padding: 10px; font-family: Arial; font-size: 15px; color: #0C5460; 
    margin-left: 12px; margin-right: 12px; max-width: 330px; }

/* ALIGNMENT */
.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

/* BOLD */
.bold { font-weight: bold; }

/* BODY */
.body { background-color: var(--body-color); margin: 0; padding: 10px 0; overflow-x: hidden; /* evita scroll lateral */ -webkit-text-size-adjust: 100%; }

/* BUTTONS */
.button-xsmall  { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--button-color); text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; color: #FFFFFF; cursor: pointer; height:  60px; width: 155px; } /* XS */
.button-small   { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--button-color); text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; color: #FFFFFF; cursor: pointer; height:  70px; width: 168px; } /* S */
.button-medium  { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--button-color); text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; color: #FFFFFF; cursor: pointer; height:  70px; width: 316px; } /* M */
.button-large   { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--button-color); text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; color: #FFFFFF; cursor: pointer; height:  80px; width: 345px; } /* L */
.button-xlarge  { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--button-color); text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; color: #FFFFFF; cursor: pointer; height: 100px; width: 345px; } /* XL */
.button-edit    { border-radius: 5px;  border: 3px solid var(--border-color); background-color: var(--button-color); text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer;                width:  80px; padding: 10px; float: right; } /* card_pymt_review,php */
.btn-print      { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--button-color); text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height:  70px; width: 168px; } /* purchase_receipt.php */
.btn-screenshot { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--button-color); text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height:  70px; width: 168px; } /* purchase_receipt.php */

/* CATEGORIES LIST */
.cat-edit-button    { border-radius: 5px; background-color: #008000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.cat-status-button  { border-radius: 5px; background-color: #FF8000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.cat-delete-button  { border-radius: 5px; background-color: #FF0000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.cat-image          { border-radius: 0px; border: 1px solid #CCCCCC; background-color: #FFFFFF; height: 240px; width: 320px; margin-left: 7px; margin-top: 7px; margin-right: 7px; margin-bottom: 7px; }
.cat-text-container { border-radius: 0px; border: 2px solid #CCCCCC; background-color: #FFFFFF; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #808080;  padding: 5px; margin-left: 7px; margin-right: 7px; }
.cat-font           { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20px; color: #000000; margin-top: 4px; }
.cat-status-font    { font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #008000; }

/* CURRENT LOGO */
.current-logo { border-radius: 7px; border: 4px solid #CCCCCC; background-color: #F6F7F8; height: 267px; width: 332px; margin-left: 13px; display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* EMPTY CONTENT DISPLAY */
.empty-content { border-radius: 10px; border: 6px solid #CCCCCC; background-color: transparent; height: 200px; width: 334px; display: flex; align-items: center; justify-content: center; margin-left: 10px; }

/* FONTS */
.font-xsmall { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.font-small  { font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.font-medium { font-family: Arial, Helvetica, sans-serif; font-size: 18px; }
.font-large  { font-family: Arial, Helvetica, sans-serif; font-size: 21px; }
.font-xlarge { font-family: Arial, Helvetica, sans-serif; font-size: 24px; }
.font-help   { text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding-left: 14px; }

/* FONT COLOR */
.color-1 { color: #818181; } /* Gris */
.color-2 { color: #000000; } /* Negro */
.color-3 { color: #FFFFFF; } /* Blanco */

/* FORMS */
.form-file        { border-radius: 7px;  border: 4px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; font-family: Arial; font-size: 20px; color: #818181; height: 55px; width: 333px; padding-left:  0; }
.form-input       { border-radius: 7px;  border: 4px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; font-family: Arial; font-size: 20px; color: #818181; height: 55px; width: 320px; padding-left: 10px; }
.form-select      { border-radius: 7px;  border: 4px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; font-family: Arial; font-size: 20px; color: #818181; height: 65px; width: 340px; padding-left: 10px; }
.form-under-space { margin-bottom: 7px; }

/* FRAMES */
.frame-menu { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #000000; text-align: center; height: auto; width: auto; margin-left: 10px; margin-right: 10px; }

/* LOGO AND LARGE IMAGES */
.image-logo { border-radius: 10px; border: 6px solid var(--border-color); height: 250px; width: 333px; }
.image-menu { border-radius:  5px; border: 0px solid #CCCCCC; height: 215px; width: 317px; }

/* MANAGER MAIN DISPLAY LIST */
.mngr-status-font     { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20px; color: #000000; }
.mngr-text-container  { border-radius: 0; border: 2px solid #CCCCCC; background-color: #FFFFFF; text-align: center; padding: 3px; margin: 7px; }
.mngr-font            { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #808080; }
.mngr-image-container { border-radius: 0; border: 2px solid #CCCCCC; background-color: #FFFFFF; text-align: center; display: flex; align-items: center; justify-content: center; margin-left: 7px; margin-top: 0; margin-right: 7px; margin-bottom: 7px; height: 260px; }
.mngr-image           { border-radius: 0px; height: 188px; width: 250px; }
.mngr-no-image        { border-radius: 0px; height: 188px; width: 250px; background: #EEEEEE; display: flex; align-items: center; justify-content: center; }
.mngr-edit-button     { border-radius: 5px; background-color: #008000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.mngr-status-button   { border-radius: 5px; background-color: #FF8000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.mngr-delete-button   { border-radius: 5px; background-color: #FF0000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }

/* MEDIUM TABLE / BUTTON */
.medium-button { border-radius: 5px; border: 5px solid #CCCCCC; background-color: #999999; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 24px; color: #FFFFFF; cursor: pointer; height: 70px; width: 318px; }

/* MENU */
.menu-frame { border-radius: 10px; border: 6px solid var(--border-color); background-color: #FFFFFF; height: auto; width: auto; margin-left: 10px; margin-right: 10px; }

/* META THEME COLOR */
:root { --theme-color: var(--body-color); }
   
/* Renglones de productos */
.style-a { border-right: 1px solid #CCCCCC; text-align: left;   font-family: Arial; font-size: 15px; color: #000000; height: 35px; padding-left:  5px; }
.style-b { border-right: 1px solid #CCCCCC; text-align: center; font-family: Arial; font-size: 15px; color: #000000; height: 35px; }
.style-c { border-right: 1px solid #CCCCCC; text-align: left;   font-family: Arial; font-size: 15px; color: #000000; height: 35px; padding-left:  5px; }
.style-d { border-right: 0px solid #CCCCCC; text-align: right;  font-family: Arial; font-size: 15px; color: #000000; height: 35px; padding-right: 5px; }
    
/* Color de renglones de productos */
.background-1 { background: #F1F3F5; }
.background-2 { background: #FFFFFF; }
     
/* PRODUCT SMALL LIST BUTTONS */
.edit-button   { border-radius: 5px; background-color: #008000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 17px; color: #FFFFFF; cursor: pointer; height: 30px; width: 73px;  margin-top: 4px; margin-bottom: 0; }
.status-button { border-radius: 5px; background-color: #FF8000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 17px; color: #FFFFFF; cursor: pointer; height: 30px; width: 73px;  margin-top: 4px; margin-bottom: 0; }
.delete-button { border-radius: 5px; background-color: #FF0000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 17px; color: #FFFFFF; cursor: pointer; height: 30px; width: 149px; margin-top: 4px; margin-bottom: 4px; }

/* prd_display_sml.php */
.sml-prd-table       { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--prd-sml-bg-color); text-align: center;  height: auto; width: 168px; padding-top: 8px; }
.sml-prd-image       { border-radius: 5px; height: 141px; width: 141px; margin-top: 5px; margin-bottom: 2px; }
.sml-prd-font-small  { font-style: italic; font-size: 16px; }
.sml-prd-font-medium { font-style: italic; font-size: 19px; }
.sml-prd-button      { border-radius: 5px; background-color: #CCCCCC; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 16px; color: #000000; cursor: pointer; height: 40px; width: 141px; margin-top: 6px; margin-bottom: 9px; }

/* PRODUCT LARGE DISPLAY */
.large- prd-status-font    { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20px; color: #000000; }
.large- prd-text-container { border-radius: 0; border: 2px solid #CCCCCC; background-color: #FFFFFF; text-align: center; margin-left: 7px; margin-right: 7px; }
.large- prd-edit-button    { border-radius: 5px; background-color: #008000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.large- prd-status-button  { border-radius: 5px; background-color: #FF8000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.large- prd-delete-button  { border-radius: 5px; background-color: #FF0000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }

/* prd_display_lrg.php */
.product-table       { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--prd-lrg-bg-color); text-align: center; height: auto; width: 345px; padding-top: 8px; }
.product-name        { border-radius: 5px;  border: 1px solid #CCCCCC; background-color: #FFFFFF; text-align: center; padding: 5px; margin-left: 7px; margin-right: 7px;  display: flex; justify-content: center; align-items: center; }
.product-image       { border-radius: 5px; height: 215px; width: 317px; margin-top: 7px; margin-bottom: 3px; }
.product-description { border-radius: 5px; border: 1px solid #CCCCCC; background-color: #F3F5F7; text-align: center; padding: 3px; margin-left: 7px; margin-bottom: 3px; margin-right: 7px; }
.product-price       { border-radius: 5px; border: 1px solid #CCCCCC; background-color: #FFFFFF; text-align: center; height: auto; width: auto; margin-left: 7px; margin-right: 7px; margin-top: 6px; margin-bottom: 0; padding: 5px; }
.product-button      { border-radius: 5px; background-color: #CCCCCC; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #000000; cursor: pointer; height: 50px; width: 317px; margin-bottom: 8px; }

/* GRAPHIC PRODUCTS */
.style- 1 { border-top-left-radius:     5px; border-right: 1px solid #CCCCCC; background-color: var(--text-area-color); text-align: center; font-family: Arial; font-weight: bold; font-size: 16px; color: #000000; height: 40px; }
.style- 2 { border-radius:              0px; border-right: 1px solid #CCCCCC; background-color: var(--text-area-color); text-align: center; font-family: Arial; font-weight: bold; font-size: 16px; color: #000000; height: 40px; }
.style- 3 { border-top-right-radius:    5px; border-right: 0px solid #CCCCCC; background-color: var(--text-area-color); text-align: center; font-family: Arial; font-weight: bold; font-size: 16px; color: #000000; height: 40px; }
.style- 4 { background-color: #CCCCCC; height: 1px; }
.style- 5 { border-bottom-left-radius:  5px; border-right: 1px solid #CCCCCC; background-color: var(--text-area-color); text-align: left;   font-family: Arial; font-weight: bold; font-size: 16px; color: #000000; height: 40px; padding-left: 10px; }
.style- 6 { border-radius:              0px; border-right: 0px solid #CCCCCC; background-color: var(--text-area-color); text-align: right;  font-family: Arial; font-weight: bold; font-size: 16px; color: #000000; height: 40px; padding-right: 5px; }
.style- 7 { border-bottom-right-radius: 5px; border-right: 0px solid #CCCCCC; background-color: var(--text-area-color); text-align: right;  font-family: Arial; font-weight: bold; font-size: 16px; color: #000000; height: 40px; padding-right: 5px; }
    
/* SEPARATOR */
.separator      { height: 5px; background-color: #CCCCCC; }
.separator-thin { height: 2px; background-color: #CCCCCC; }

/* SUB-TOTAL FRAME */
.sub-total-frame { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--subtotal-bg-color); /* Estructura */
    margin-left: 10px; margin-right: 10px; /* Margen externo */
    display: flex; justify-content: space-between; align-items: center; padding: 0 25px; /* Ajuste del contenido */
    height: 80px; width: auto; /* Medidas */
    }

/* TABLES */
.table-main  { border-radius: 10px; background-color: var(--page-bg-color); margin: 0 auto; /* margin 0 auto centra el contenido */ height: auto; width: 365px; /* Dejar el ancho en 365px */ }
.table-2nd   { border-radius: 10px; border: 5px solid var(--border-color); background-color: var(--text-area-color); text-align: center; height: auto; width: 345px; margin: 0 auto; }

/* TITLE */
.title-frame { border-radius: 10px; border: 6px solid var(--border-color); background-color: var(--titles-bg-color); height: 90px; width: auto; margin-left: 10px; margin-right: 10px; }

/* TITLE CENTERED */
.title-text-centered { display: flex; justify-content: center; /* Centra horizontalmente */ align-items: center; /* Centra verticalmente */ text-align: center; /* Alinea texto internamente */ flex-direction: column; }

/* TOTAL */
.total-pymt { background-color: var(--total-bg-color); padding-top: 7px; padding-bottom: 7px; } /* card_pymt-review.php */

/* TOTAL FRAME */
.grand-total-frame { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #FFFFFF; /* Estructura */
   margin-left: 10px; margin-right: 10px; /* Margen externo del recuadro*/
   display: flex; flex-direction: column; justify-content: center; /* Ajuste del contenido */
   padding-left: 15px; padding-right:15px; /* Volumen interno del recuadro */
   height: <?= $tax_fee_active ? '100px' : '80px' ?>; /* Altura con funcion PHP (Implementada directamente en order_review.php) */
   }
   
/* UPPER CASES */
.only-upper { text-transform: uppercase; } /* Solo mayusculas */