/** * Theme Name: Rey Child * Theme URI: http://reytheme.com/ * Description: This is a child theme of Rey. * Author: Marius H. * Author URI: https://twitter.com/mariushoria * Template: rey * Version: 1.0.0 * License: General Public License * License URI: http://www.gnu.org/licenses/gpl.html * Text Domain: rey-child */ /* ========================================================= MR.IT PREMIUM PC CONFIGURATOR YITH WooCommerce Product Add-ons VERSION: MR.IT LIGHT PREMIUM THEME ========================================================= */ /* ========================================================= 01. ADD-ON SECTION SPACING - START ========================================================= */ .yith-wapo-block { margin-bottom: 14px !important; } /* ========================================================= 01. ADD-ON SECTION SPACING - END ========================================================= */ /* ========================================================= 02. ACCORDION HEADER - BASE - START ========================================================= */ .yith-wapo-addon.wapo-toggle .wapo-addon-title { position: relative !important; /* MR.IT light neutral */ background: #F7F8F8 !important; border: 1px solid #DDE2E0 !important; border-radius: 10px !important; padding: 15px 50px 15px 58px !important; margin: 12px 0 !important; min-height: 54px !important; box-sizing: border-box !important; /* Typography */ font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #26332A !important; /* Subtle premium shadow */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important; } /* ========================================================= 02. ACCORDION HEADER - BASE - END ========================================================= */ /* ========================================================= 03. ACCORDION HEADER - CLOSED HOVER - START ========================================================= */ .yith-wapo-addon.wapo-toggle .wapo-addon-title:not(.toggle-open):hover { background: #F2FBF4 !important; border-color: #A8D8B4 !important; box-shadow: 0 4px 10px rgba(76, 175, 80, 0.06) !important; } /* ========================================================= 03. ACCORDION HEADER - CLOSED HOVER - END ========================================================= */ /* ========================================================= 04. ACCORDION HEADER - OPEN / ACTIVE - START ========================================================= */ .yith-wapo-addon.wapo-toggle .wapo-addon-title.toggle-open { background: #EAF8EE !important; border-color: #4CAF50 !important; color: #26332A !important; box-shadow: 0 3px 10px rgba(76, 175, 80, 0.08) !important; } /* ========================================================= 04. ACCORDION HEADER - OPEN / ACTIVE - END ========================================================= */ /* ========================================================= 05. ACCORDION PLUS / MINUS ICON - BASE - START ========================================================= */ .yith-wapo-addon.wapo-toggle .wapo-addon-title::before { /* Hide YITH original icon */ content: "" !important; width: 32px !important; height: 32px !important; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; border-radius: 50% !important; box-sizing: border-box !important; z-index: 2 !important; } /* ========================================================= 05. ACCORDION PLUS / MINUS ICON - BASE - END ========================================================= */ /* ========================================================= 06. ACCORDION CLOSED - PLUS ICON - START ========================================================= */ .yith-wapo-addon.wapo-toggle .wapo-addon-title:not(.toggle-open)::before { /* White circle */ background: #FFFFFF !important; /* Neutral border */ border: 1px solid #D5DADD !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Create + symbol */ background-image: linear-gradient( #3F484D, #3F484D ), linear-gradient( #3F484D, #3F484D ) !important; background-size: 12px 1.5px, 1.5px 12px !important; background-position: center, center !important; background-repeat: no-repeat !important; } /* ========================================================= 06. ACCORDION CLOSED - PLUS ICON - END ========================================================= */ /* ========================================================= 07. ACCORDION OPEN - MINUS ICON - START ========================================================= */ .yith-wapo-addon.wapo-toggle .wapo-addon-title.toggle-open::before { /* MR.IT green */ background: #18A957 !important; border: 1px solid #18A957 !important; box-shadow: 0 2px 5px rgba(24, 169, 87, 0.15) !important; /* Create - symbol */ background-image: linear-gradient( #FFFFFF, #FFFFFF ) !important; background-size: 12px 1.5px !important; background-position: center !important; background-repeat: no-repeat !important; } /* ========================================================= 07. ACCORDION OPEN - MINUS ICON - END ========================================================= */ /* ========================================================= 08. ACCORDION CLOSED - DOWN CHEVRON - START ========================================================= */ .yith-wapo-addon.wapo-toggle .wapo-addon-title:not(.toggle-open)::after { content: "" !important; position: absolute !important; right: 20px !important; top: 50% !important; width: 8px !important; height: 8px !important; border-right: 2px solid #5A6268 !important; border-bottom: 2px solid #5A6268 !important; transform: translateY(-70%) rotate(45deg) !important; transition: transform 0.25s ease, border-color 0.25s ease !important; pointer-events: none !important; } /* ========================================================= 08. ACCORDION CLOSED - DOWN CHEVRON - END ========================================================= */ /* ========================================================= 09. ACCORDION OPEN - UP CHEVRON - START ========================================================= */ .yith-wapo-addon.wapo-toggle .wapo-addon-title.toggle-open::after { content: "" !important; position: absolute !important; right: 20px !important; top: 50% !important; width: 8px !important; height: 8px !important; border-right: 2px solid #18A957 !important; border-bottom: 2px solid #18A957 !important; transform: translateY(-30%) rotate(225deg) !important; transition: transform 0.25s ease, border-color 0.25s ease !important; pointer-events: none !important; } /* ========================================================= 09. ACCORDION OPEN - UP CHEVRON - END ========================================================= */ /* ========================================================= 10. PRODUCT OPTION CARD - BASE - START ========================================================= */ .yith-wapo-option { position: relative !important; box-sizing: border-box !important; background: #FFFFFF !important; border-radius: 8px !important; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease, background 0.2s ease !important; } /* ========================================================= 10. PRODUCT OPTION CARD - BASE - END ========================================================= */ /* ========================================================= 11. PRODUCT OPTION CARD - HOVER BORDER - START ========================================================= */ .yith-wapo-option:hover::before { content: ""; position: absolute; inset: 0; border: 3px solid #4CAF50; border-radius: 6px; pointer-events: none; box-sizing: border-box; z-index: 0; } /* ========================================================= 11. PRODUCT OPTION CARD - HOVER BORDER - END ========================================================= */ /* ========================================================= 12. PRODUCT OPTION CARD - HOVER SHADOW - START ========================================================= */ .yith-wapo-option:hover { box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08); } /* ========================================================= 12. PRODUCT OPTION CARD - HOVER SHADOW - END ========================================================= */ /* ========================================================= 13. PRODUCT OPTION CARD - SELECTED - START ========================================================= */ .yith-wapo-option.selected { /* Very light MR.IT green */ background: #F5FFF7 !important; box-shadow: 0 5px 16px rgba(76, 175, 80, 0.12); } /* ========================================================= 13. PRODUCT OPTION CARD - SELECTED - END ========================================================= */ /* ========================================================= 14. PRODUCT OPTION CARD - SELECTED BORDER - START ========================================================= */ .yith-wapo-option.selected::before { content: ""; position: absolute; inset: 0; border: 3px solid #4CAF50; border-radius: 6px; pointer-events: none; box-sizing: border-box; z-index: 0; } /* ========================================================= 14. PRODUCT OPTION CARD - SELECTED BORDER - END ========================================================= */ /* ========================================================= 15. PRODUCT CARD CONTENT LAYER - START ========================================================= */ .yith-wapo-option > * { position: relative; z-index: 1; } /* ========================================================= 15. PRODUCT CARD CONTENT LAYER - END ========================================================= */ /* ========================================================= 16. PRODUCT CARD TEXT - START ========================================================= */ .yith-wapo-option label { color: #4A5157 !important; font-weight: 500 !important; } /* Selected product text */ .yith-wapo-option.selected label { color: #26332A !important; } /* ========================================================= 16. PRODUCT CARD TEXT - END ========================================================= */ /* ========================================================= 17. PRODUCT PRICE - BASE - START ========================================================= */ .yith-wapo-option .price { font-weight: 600 !important; } /* ========================================================= 17. PRODUCT PRICE - BASE - END ========================================================= */ /* ========================================================= 18. PREMIUM PRICE PILL - BASE - START ========================================================= */ .yith-wapo-option .option-price { display: inline-block !important; margin-top: 8px !important; padding: 6px 14px !important; background: #E9ECEF !important; border-radius: 20px !important; color: #343A40 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; white-space: nowrap !important; box-sizing: border-box !important; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } /* ========================================================= 18. PREMIUM PRICE PILL - BASE - END ========================================================= */ /* ========================================================= 19. PREMIUM PRICE PILL - HOVER - START ========================================================= */ .yith-wapo-option:hover .option-price { background: #4CAF50 !important; color: #FFFFFF !important; } /* ========================================================= 19. PREMIUM PRICE PILL - HOVER - END ========================================================= */ /* ========================================================= 20. PREMIUM PRICE PILL - SELECTED - START ========================================================= */ .yith-wapo-option.selected .option-price { background: #18A957 !important; color: #FFFFFF !important; box-shadow: 0 3px 8px rgba(24, 169, 87, 0.25); transform: translateY(-1px); } /* ========================================================= 20. PREMIUM PRICE PILL - SELECTED - END ========================================================= */ /* ========================================================= 21. GLOBAL SMOOTH TRANSITIONS - START ========================================================= */ .yith-wapo-option, .yith-wapo-addon.wapo-toggle .wapo-addon-title { transition: all 0.2s ease !important; } /* ========================================================= 21. GLOBAL SMOOTH TRANSITIONS - END ========================================================= */ /* ========================================================= 22. MOBILE - ACCORDION - START ========================================================= */ @media (max-width: 767px) { .yith-wapo-addon.wapo-toggle .wapo-addon-title { font-size: 18px !important; min-height: 50px !important; padding: 13px 45px 13px 55px !important; border-radius: 9px !important; } /* Smaller plus / minus circle */ .yith-wapo-addon.wapo-toggle .wapo-addon-title::before { width: 30px !important; height: 30px !important; left: 14px !important; } /* Smaller chevron */ .yith-wapo-addon.wapo-toggle .wapo-addon-title::after { right: 17px !important; width: 7px !important; height: 7px !important; } } /* ========================================================= 22. MOBILE - ACCORDION - END ========================================================= */ /* ========================================================= 23. MOBILE - PRODUCT CARDS - START ========================================================= */ @media (max-width: 767px) { .yith-wapo-option { border-radius: 7px !important; } .yith-wapo-option:hover::before { border-radius: 7px !important; } .yith-wapo-option.selected::before { border-radius: 7px !important; } } /* ========================================================= 23. MOBILE - PRODUCT CARDS - END ========================================================= */ /* ========================================================= 24. MOBILE - PRICE PILL - START ========================================================= */ @media (max-width: 767px) { .yith-wapo-option .option-price { font-size: 13px !important; padding: 5px 12px !important; } } /* ========================================================= 24. MOBILE - PRICE PILL - END ========================================================= */